/*
 * Theme variables. Edit these to experiment with the site's color scheme.
 * Loaded before style.css and modern.css, so any rule there can reference
 * these via var(--name) and will pick up changes made here.
 *
 * Currently set to the site's ORIGINAL blue/cyan colors (exact values
 * copied from style.css's .most-selling/.honeymoon/.banner-btn gradients)
 * so the visual output matches production while we work section by
 * section. Change these values (not the rules that use them) to
 * experiment with new colors later.
 */
:root {
  /* site-wide typeface (loaded from Google Fonts in includes/head.php) */
  /* Inter - loaded in includes/head.php. To move to a licensed face later
     (e.g. Aeonik), self-host it and add it ahead of 'Inter' here; nothing
     else references a font name directly. The system stack after it covers
     the gap before the webfont lands. */
  --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  --color-text: #707070;
  --color-white: #ffffff;
  --color-dark: #000000;

  /* Section band. Retuned from azure blue to the Estate dark green: a deep,
     near-neutral canvas that lets white cards and the accent carry the page. */
  --color-section-start: #143a2e;
  --color-section-mid: #0f2f26;
  --color-section-end: #0b241d;

  /* Legacy 4-stop gradient tokens, retuned from teal->cyan onto the Estate
     green ramp. These are referenced ~80 times across the stylesheets
     (buttons, icons, link accents, hero chrome), so redefining them here is
     what carries the recolour site-wide rather than patching each call site.
     --color-btn-end doubles as a text colour on light surfaces, so it is
     pinned to the AA-safe accent value (6.5:1 on white). */
  --color-btn-start: #0d8060;
  --color-btn-mid1: #0b7457;
  --color-btn-mid2: #0a6f54;
  --color-btn-end: #0a6b4f;

  /* WhatsApp uses its own recognizable brand green - intentional, not part
     of the site palette. */
  --color-whatsapp: #25d366;
  --color-whatsapp-dark: #1ebe57;

  /* mobile nav logo height - shared by the top bar and the drawer header
     so the two always stay in sync */
  --nav-logo-height: 32px;

  /* spacing / shape tokens for the modern card layer - unrelated to color,
     left as-is */
  --radius-card: 16px;
  --radius-pill: 999px;
  --radius-btn: 10px;
  --radius-thumb: 12px;

  /* ---- Elevation: FLAT ----
     The reference reports shadow:none on every component - separation comes
     from hairline borders and whitespace, not from drop shadows. These two
     tokens are kept (they are referenced widely) but reduced to a hairline
     lift at rest; real shadow appears on hover only. */
  --shadow-card: 0 1px 2px rgba(11, 36, 29, 0.05);
  --shadow-card-hover: 0 10px 26px rgba(11, 36, 29, 0.13);

  /* ================= ESTATE PALETTE =================
     Direction A. One saturated green does every primary action; everything
     else is ink, white, or a near-white tint. Every pairing below clears
     WCAG AA (accent on white 6.50:1, muted on white 5.94:1).
     Retune --ui-accent and the whole button/link layer follows. */
  --ui-ink: #0d1211;
  --ui-muted: #5c6663;
  /* tertiary text still has to clear 4.5:1 on white, so the scale bottoms
     out here rather than going lighter */
  --ui-faint: #667069;
  --ui-line: #e2e6e4;
  --ui-line-hover: #c8d0cd;
  --ui-line-soft: #edf1ef;
  --ui-surface: #ffffff;
  --ui-surface-alt: #f2f6f4;
  --ui-accent: #0a6b4f;
  --ui-accent-dark: #075740;
  /* pressed/hover state for buttons that already sit on --ui-accent-dark.
     Deliberately still green: going to near-black read as a different
     component lighting up rather than the same button reacting. */
  --ui-accent-darker: #053f2e;
  --ui-accent-soft: #d8f0e6;
  --ui-accent-on-dark: #7fd6b4;

  /* Dark surfaces: nav drawer, footer, the quote strip. Kept dark because
     those genuinely want to recede. */
  --ui-band: #0d2b22;

  /* Light section band - a pale mint wash used to separate a section without
     going dark. Ink on it measures 17:1, so text stays black rather than
     flipping to white. This is the band treatment for content sections. */
  --ui-band-light: #e8f6f2;
  --ui-band-light-line: #d3ebe4;

  /* Warm off-white page wash. Sits behind white cards so they read as
     objects on a surface rather than white-on-white. Barely a colour - just
     enough to give the cards an edge without tinting them. */
  --ui-page-wash: #f9f8f6;

  /* text/border that sit ON --ui-accent-soft (9.2:1 on that tint) */
  --ui-accent-ink: #0a4534;
  --ui-accent-line: #d6ede2;
  /* lighter accent tints for use on the dark band */
  --ui-accent-tint: #8fe3c2;

  /* reserved semantics: green for ratings/savings, amber for offers only */
  --ui-positive: #0a6b4f;
  --ui-highlight: #f5b93b;

  /* negative: exclusions, "not included", error states */
  --ui-negative: #c0504d;
  --ui-negative-soft: #fdf0ef;
  --ui-negative-line: #f3d9d6;

  /* wishlist heart when saved - deliberately outside the brand palette so a
     saved item reads as "yours", not as another brand accent */
  --ui-favorite: #ff4d6d;

  /* soft neutral wash used by the About band */
  --ui-wash-start: #f1f3f6;
  --ui-wash-end: #e9edf2;
}