/* tokens.css — the single source of truth for all design tokens.
 * :root = LIGHT (marketing/intake/funnel). [data-theme="dark"] = the customer
 * dashboard. Every other stylesheet references ONLY these variables, so the same
 * components.css renders both themes with no per-page overrides.
 * Brand ramp matches the console's base.css so the public site, the generated
 * customer sites, and the operator console all share one palette. */

:root {
  color-scheme: light;
  /* ---- Forest / gold brand ramp (shared w/ console base.css) ---- */
  --deep: #09231d;          /* deepest forest — hero/CTA bands */
  --forest: #113b32;        /* primary brand green */
  --forest-2: #246a55;      /* brighter green / links */
  --gold: #d7b65d;          /* accent */
  --gold-ink: #5a4413;      /* ink-on-gold (WCAG-safe glyphs on gold) */
  --gold-dark: #8a6820;     /* gold kicker on light surfaces (~4.9:1 on paper — WCAG AA) */
  --shimmer-base: #2c8255;  /* conic ring base */
  --shimmer-glint: #8fe6b8; /* glint ramp */
  --shimmer-peak: #ecfff5;  /* glint peak */

  /* ---- Light surface scale (marketing) ---- */
  --paper: #f5f1e8;         /* page */
  --surface: #fbfaf6;       /* card */
  --surface-2: #fffaf1;     /* warm raised card (pricing) */
  --surface-3: #fffdf8;     /* input bg */
  --tint: #e8f0e7;          /* green-tinted block */
  --clay: #eee4d1;
  --white: #ffffff;
  --ink: #14201c;           /* primary text */
  --muted: #5d6863;         /* secondary text (4.6:1 on paper) */
  --faint: #8a9a90;         /* hints / placeholder */
  --line: rgba(20, 32, 28, .14);
  --line-2: rgba(20, 32, 28, .22);

  /* header tokens kept separate so a dark override can't poison the scrolled bar */
  --header-ink: #ffffff;
  --header-ink-scrolled: #14201c;
  --header-bg-scrolled: rgba(255, 255, 255, .96);

  /* ---- Semantic ---- */
  --ok: #1f7a52;     --ok-bg: rgba(31, 122, 82, .10);
  --warn: #b07d12;   --warn-bg: #fff8e5;
  --error: #b4452f;  --error-bg: rgba(180, 69, 47, .08);
  --info: #246a55;   --info-bg: rgba(36, 106, 85, .10);

  /* ---- Elevation ---- */
  --sh-1: 0 6px 20px rgba(9, 35, 29, .08);
  --sh-2: 0 14px 40px -18px rgba(9, 35, 29, .20);
  --sh-3: 0 24px 70px rgba(9, 35, 29, .16);
  --sh-4: 0 32px 90px rgba(9, 35, 29, .22);
  --glow-shimmer: 0 0 14px rgba(44, 130, 85, .22);

  /* ---- Radius ---- */
  --r-sm: 8px; --r: 12px; --r-md: 12px; --r-lg: 18px; --r-pill: 999px;

  /* ---- Spacing (4px base) ---- */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px;
  --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px;
  --pad: clamp(20px, 5vw, 64px);
  --maxw: 1180px;

  /* ---- z-index ladder ---- */
  --z-header: 20; --z-dropdown: 30; --z-overlay: 140; --z-toast: 400; --z-tooltip: 500;

  /* ---- Motion ---- */
  --dur-1: 150ms; --dur-2: 220ms; --dur-3: 300ms;
  --ease: cubic-bezier(.22, .61, .36, 1);   /* ease-out */
  --shimmer-speed: 3.2s;

  /* ---- Type ---- */
  --font-display: "Saira Condensed", "Arial Narrow", "Helvetica Neue Condensed", system-ui, sans-serif;
  --font-body: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
}

/* ===== DARK theme = customer dashboard ===== */
/* [data-theme="black"] — the customer dashboard's default: a true-black neutral
 * canvas (no green cast) that lets the forest/gold brand accents carry the color.
 * Same semantic/elevation values as dark. Toggled to "light" by theme-boot.js +
 * the dashboard's theme button; persisted in localStorage("lhTheme"). */
[data-theme="black"] {
  color-scheme: dark;
  --paper: #050505;
  --surface: #0e0e0e;
  --surface-2: #151515;
  --surface-3: #1b1b1b;
  --tint: #111311;
  --clay: #161616;
  --ink: #ececec;
  --muted: #a6aba7;
  --faint: #6c716d;
  --line: #242424;
  --line-2: #363636;
  --header-ink: #ececec;
  --header-ink-scrolled: #ececec;
  --header-bg-scrolled: rgba(8, 8, 8, .84);
  --ok: #34d399;    --ok-bg: rgba(52, 211, 153, .12);
  --warn: #f1c662;  --warn-bg: rgba(241, 198, 98, .10);
  --error: #f87171; --error-bg: rgba(248, 113, 113, .10);
  --info: #8fe6b8;  --info-bg: rgba(143, 230, 184, .10);
  --sh-1: 0 6px 20px rgba(0, 0, 0, .5);
  --sh-2: 0 14px 40px -12px rgba(0, 0, 0, .65);
  --sh-3: 0 24px 70px rgba(0, 0, 0, .6);
  --sh-4: 0 32px 90px rgba(0, 0, 0, .7);
  --glow-shimmer: 0 0 20px rgba(44, 130, 85, .30);
  --gold-dark: #f1c662;
}
[data-theme="dark"] {
  color-scheme: dark;
  --paper: #0c1310;
  --surface: #121a16;
  --surface-2: #16201b;
  --surface-3: #1c2823;
  --tint: #16201b;
  --ink: #e9efea;
  --muted: #a3b1a8;
  --faint: #66756c;
  --line: #243029;
  --line-2: #324036;
  --header-ink: #e9efea;
  --header-ink-scrolled: #e9efea;
  --header-bg-scrolled: rgba(13, 20, 16, .82);
  --ok: #34d399;    --ok-bg: rgba(52, 211, 153, .12);
  --warn: #f1c662;  --warn-bg: rgba(241, 198, 98, .10);
  --error: #f87171; --error-bg: rgba(248, 113, 113, .10);
  --info: #8fe6b8;  --info-bg: rgba(143, 230, 184, .10);
  --sh-1: 0 6px 20px rgba(0, 0, 0, .4);
  --sh-2: 0 14px 40px -12px rgba(0, 0, 0, .55);
  --sh-3: 0 24px 70px rgba(0, 0, 0, .5);
  --sh-4: 0 32px 90px rgba(0, 0, 0, .6);
  --glow-shimmer: 0 0 20px rgba(44, 130, 85, .34);
  --gold-dark: #f1c662;
}