/* Shared brand palette. Loaded after production UI; document paper/export styles stay independent. */
:root {
  --brand-forest: #123d32;
  --brand-forest-dark: #0b2b24;
  --action-gold: #e6b65c;
  --action-gold-hover: #f0c573;
  --action-border: #a5782c;
  --sage-surface: #f2f6f3;
  --navy: var(--brand-forest);
  --navy-dark: var(--brand-forest-dark);
  --gold: var(--action-gold);
  --gold-light: #fbf1da;
  --ink: #1b303d;
  --wash: var(--sage-surface);
}

/* Focus rings appear immediately rather than animating from an invisible outline. */
.button { transition: background-color .18s ease, border-color .18s ease, box-shadow .18s ease, transform .18s ease; }
@media (prefers-reduced-motion: reduce) { .button { transition: none; } }

/* Primary actions use one high-contrast treatment. Secondary outline controls stay secondary. */
.button:not(.outline), .button.gold, .button.mpesa-button {
  background: var(--action-gold);
  border-color: var(--action-border);
  color: var(--brand-forest);
  box-shadow: 0 3px 10px #123d3210;
}
.button:not(.outline):hover, .button.gold:hover, .button.mpesa-button:hover {
  background: var(--action-gold-hover);
  border-color: var(--action-border);
  color: var(--brand-forest-dark);
}
.button.outline { color: var(--brand-forest); border-color: #6e897a; background: transparent; box-shadow: none; }
.button.outline:hover { background: #e8f0eb; border-color: var(--brand-forest); color: var(--brand-forest); }
:focus-visible, .button.mpesa-button:focus-visible { outline: 3px solid var(--brand-forest); outline-offset: 3px; }

/* Existing white wordmark on a solid forest header; readable navigation in every state. */
.site-header {
  background: var(--brand-forest);
  color: #fff;
  border-bottom: 2px solid var(--action-gold);
  box-shadow: 0 3px 16px #123d3214;
  backdrop-filter: none;
}
.site-header .main-nav > a, .site-header .nav-group > button,
.site-header .nav-actions > .sign-in, .site-header .nav-cart, .site-header .menu-toggle { color: #fff; }
.site-header .main-nav > a.nav-primary, .site-header .main-nav > a.nav-ai { color: #fff !important; }
.site-header .main-nav > a.nav-ai { background: #ffffff12; }
.site-header .main-nav > a:hover, .site-header .nav-group > button:hover,
.site-header .sign-in:hover, .site-header .nav-cart:hover { color: #f4d59a; }
.site-header .main-nav > a.nav-ai:hover { background: #ffffff20; color: #f4d59a !important; }
.site-header .nav-group > button span { color: #d0e1d7; }
.site-header .nav-dropdown { background: #fff; border: 1px solid #d9e4dd; box-shadow: 0 14px 32px #0b2b2426; }
.site-header .nav-dropdown a { color: var(--brand-forest); border-radius: 5px; }
.site-header .nav-dropdown a:hover, .site-header .nav-dropdown a:focus-visible { background: var(--sage-surface); color: var(--brand-forest-dark); }
.site-header .nav-cart [data-cart-count] { background: var(--action-gold); color: var(--brand-forest); font-weight: 700; }
.site-header .header-ai-cta { white-space: nowrap; }
.site-header :focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.site-header .nav-dropdown :focus-visible { outline-color: var(--brand-forest); outline-offset: -2px; }

/* Keep the task's Buy/Pay/Choose-plan action dominant throughout the purchase journey. */
.purchase-journey .site-header .header-ai-cta { background: transparent; color: #fff; border-color: #a5beb1; box-shadow: none; }
.purchase-journey .site-header .header-ai-cta:hover { background: #ffffff12; color: #fff; border-color: #fff; }
.purchase-journey .site-header .main-nav > a.nav-ai { background: transparent; }
.document-detail-layout .document-purchase-panel { background: var(--sage-surface); border-color: #ccdcd2; border-top: 3px solid var(--brand-forest); }
.document-purchase-total strong, .checkout-total { color: var(--brand-forest); }
.document-format { background: #e1ece5; color: #234b3b; }
.document-purchase-panel .button.mpesa-button, .checkout-form-card .button.mpesa-button { font-weight: 700; }
.cart-summary { background: var(--sage-surface); border-color: #ccdcd2; }
.payment-status-card .checkout-card-header, .payment-order { background: var(--sage-surface); }

/* Colour supports the content rather than filling every card. */
.hero { background: var(--sage-surface); }
.hero-copy h1 { color: var(--ink); }
.hero-search { border-color: #b9cfc1; box-shadow: 0 6px 24px #123d320c; }
.site-footer { background: var(--brand-forest-dark); color: #fff; border-top-color: #315b4b; }
.site-footer h3, .site-footer .brand { color: #fff; }
.site-footer p, .site-footer small, .site-footer .footer-bottom { color: #d0dfd6; }
.site-footer a, .site-footer .footer-grid > div > a:not(.brand) { color: #e1eae5; }
.site-footer a:hover, .site-footer .footer-grid > div > a:not(.brand):hover { color: #f4d59a; }
.site-footer .footer-bottom { border-top-color: #315b4b; }
.site-footer :focus-visible { outline-color: #fff; }

@media (max-width: 1250px) {
  .site-header .main-nav.open { background: var(--brand-forest); }
  .site-header .nav-dropdown { background: #fff; }
  .site-header .main-nav { border-top: 1px solid #ffffff26; }
  .site-header .nav-group > button { border-radius: 6px; }
}
.hero-search:focus-within { outline: 3px solid var(--brand-forest); outline-offset: 3px; }
.checkout-form-card input:focus-visible { outline: 3px solid var(--brand-forest); outline-offset: 3px; }
/* Gold text on light surfaces uses a deeper shade than gold button fills. */
.premium-workflow li b, .page-hero h1 span, .cart-title h1 span { color: #8a6124; }
.snapshot-page:focus-visible, .case-import-feedback:focus, .case-batch-outcome:focus { outline-color: var(--brand-forest); }