/* ============================================================
   DESIGN TOKENS v1 — tokens.css
   ------------------------------------------------------------
   Shared design tokens block for productgrowth.in.
   Linked directly by product landing pages and @import'd by styles.css.
   ============================================================ */
:root {
  /* ---- TYPE FAMILIES ---- */
  --font-serif: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  --font-sans: 'Inter', -apple-system, 'Segoe UI', Roboto, sans-serif;

  /* ---- FLUID TYPE SCALE (min at ~380px → max at ~1280px) ---- */
  --fs-hero: clamp(2.125rem, 5.6vw, 3.5rem);   --lh-hero: 1.08;
  --fs-display: clamp(2.0625rem, 4.6vw, 2.875rem); --lh-display: 1.14;
  --fs-h1: clamp(1.75rem, 3.4vw, 2.25rem);     --lh-h1: 1.2;
  --fs-h2: clamp(1.25rem, 1.8vw, 1.375rem);    --lh-h2: 1.36;
  --fs-h3: clamp(1.0625rem, 1.4vw, 1.125rem);  --lh-h3: 1.44;
  --fs-body: 1.0625rem;                        --lh-body: 1.65;  /* 17px — never shrinks */
  --fs-ui: 0.9375rem;                          --lh-ui: 1.47;    /* 15px — cards, nav, forms */
  --fs-small: 0.875rem;                        --lh-small: 1.43; /* 14px */
  --fs-caption: 0.8125rem;                     --lh-caption: 1.38;/* 13px */
  --fs-overline: 0.75rem;                      --lh-overline: 1.33;/* 12px */
  --fs-stat: clamp(2.25rem, 4.4vw, 2.75rem);   --lh-stat: 1.09;

  --measure: 680px;        /* article body max-width ≈ 68ch at 17px */

  /* ---- NAV HEIGHT TOKENS ---- */
  --nav-h: 69px;
  --nav-h-compact: 56px;

  /* ---- SPACING (8px rhythm) ---- */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px; --s5: 24px;
  --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px;

  /* ---- RADII ---- */
  --r-card: 10px; --r-pill: 999px; --r-btn: 8px;

  /* ---- COLOUR · LIGHT (default) ---- */
  --bg: #FAFAF8;             /* page — warm paper, not grey */
  --surface: #FFFFFF;        /* cards, callouts */
  --sunken: #F3F3F0;         /* code, skeleton base, table stripe */
  --border: #E7E5E0;
  --border-strong: #C9C6BE;
  --ink: #14171C;            /* headlines */
  --text: #212730;           /* body */
  --text-2: #555B64;         /* deks, meta, captions */
  --text-3: #6E747D;         /* timestamps, placeholders */
  --accent: #E60023;         /* brand red */
  --accent-text: #C40020;    /* red for ≤17px text — 6.0:1 on white */
  --accent-tint: rgba(230,0,35,.05);
  --scrim: rgba(20,23,28,.55);

  /* Corrected Product Accent Scale (Item #5 & #6) */
  --p-intel: #F0A500;  --p-intel-text: #F0A500;
  --p-listen: #F0A500; --p-listen-text: #F0A500; --p-listen-2: #F07030;
  --p-kriya: #E8650A;  --p-kriya-text: #A94A10;

  --ok: #15803D; --warn: #9A6700; --error: #B42318;
  --ok-tint: rgba(21,128,61,.08); --warn-tint: rgba(154,103,0,.08); --error-tint: rgba(180,35,24,.06);
}

[data-theme="dark"], html:not(.light-mode) {
  --bg: #0C0E12;
  --surface: #14171D;
  --sunken: #101318;
  --border: #262B33;
  --border-strong: #3B424D;
  --ink: #F2F3F5;
  --text: #D5D9DF;
  --text-2: #A2A9B3;
  --text-3: #848B95;
  --accent: #FF4D63;
  --accent-text: #FF6478;
  --accent-tint: rgba(255,77,99,.09);
  --scrim: rgba(0,0,0,.6);

  --p-intel: #F0A500;  --p-intel-text: #F0A500;
  --p-listen: #F0A500; --p-listen-text: #F0A500; --p-listen-2: #F07030;
  --p-kriya: #E8650A;  --p-kriya-text: #F59660;

  --ok: #4ADE80; --warn: #FBBF24; --error: #F87171;
  --ok-tint: rgba(74,222,128,.10); --warn-tint: rgba(251,191,36,.10); --error-tint: rgba(248,113,113,.10);
}

:root {
  --bg-dark: var(--bg, #0C0E12);
  --surface-dark: var(--surface, #14171D);
  --surface-dark-lift: var(--sunken, #101318);
  --border-dark: var(--border, #262B33);
  --border-dark-hover: var(--border-strong, #3B424D);
  --text-primary: var(--ink, #F2F3F5);
  --text-muted: var(--text-2, #A2A9B3);
  --text-dim: var(--text-3, #848B95);

  /* Product accents */
  --accent-kriya: var(--p-kriya, #E8650A);
  --accent-intelligence: var(--p-intel, #F0A500);
  --accent-listen: var(--p-listen, #F0A500);

  /* Accent aliases and base tokens */
  --primary: var(--accent, #FF4D63);
  --primary-dark: #ad081b;
  --primary-light: #ff4757;
  --primary-shadow: rgba(230, 0, 35, 0.08);
  --primary-light-bg: var(--accent-tint, rgba(255, 77, 99, 0.09));
}