/* Shopwise design tokens, v1.1 (Plan 11; founder rulings of 17 October 2026).
   One file for every surface: the why-page inlines it, the website imports it.
   Raw ramps are for brand work and data; product UI reads the semantic tokens, which carry the right
   value in both themes. Every text token meets 4.5:1 on page, card and sunken grounds in its theme. */

@font-face {
  font-family: "Gabarito";
  src: url("fonts/gabarito-latin-600-800.woff2") format("woff2");
  font-weight: 600 800;
  font-style: normal;
  font-display: swap;
  /* Latin letters and numerals only. The rupee sign and every Indian script fall to the system font. */
  unicode-range: U+0020-007E, U+00A0, U+00B7, U+00D7, U+2013, U+2018-201D, U+2022, U+2026, U+2192;
}

:root {
  /* Raw ramps (unchanged from v1) */
  --counsel-900: #0e3733; --counsel-800: #123f3b; --counsel-700: #154e4a; --counsel-600: #1c5e59;
  --counsel-500: #2c7873; --counsel-400: #4f938d; --counsel-300: #86b5b0; --counsel-200: #bcd7d3;
  --counsel-100: #e2eeec;
  --welcome-800: #a84724; --welcome-700: #c0542f; --welcome-600: #d15f37; --welcome-500: #e26b43;
  --welcome-400: #ea876a; --welcome-300: #f1ab94; --welcome-200: #f7d0c3; --welcome-100: #fbe8e0;
  --paper: #faf6ee; --paper-deep: #f1ecdd; --sand: #e7e0d2; --sand-deep: #d9cfba;
  --ink: #1f1f1d; --ink-strong: #3a372f;

  /* Type */
  --font-display: "Gabarito", system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", sans-serif;
  --font-price: "Gabarito", system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", sans-serif; /* kept in every script */
  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", "Helvetica Neue", Arial, sans-serif;
  --font-data: ui-monospace, "SF Mono", "Cascadia Mono", "Roboto Mono", monospace; /* labels only, never reading text */
  --fs-display: clamp(2.5rem, 1.6rem + 4vw, 3.5rem);
  --fs-h1: clamp(2rem, 1.5rem + 2.2vw, 2.5rem);
  --fs-h2: clamp(1.5rem, 1.2rem + 1.4vw, 1.875rem);
  --fs-h3: 1.1875rem;
  --fs-price: 1.375rem;
  --fs-body-lg: 1.125rem;
  --fs-body: 1rem;
  --fs-body-sm: 0.875rem;
  --fs-caption: 0.8125rem;
  --fs-eyebrow: 0.78rem;
  --lh-tight: 1.1; --lh-snug: 1.3; --lh-body: 1.55; --lh-indic: 1.75;

  /* Space, radius, elevation, motif, motion */
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px;
  --space-6: 24px; --space-7: 32px; --space-8: 40px; --space-9: 48px; --space-10: 64px;
  --radius-sm: 12px; --radius-md: 14px; --radius-lg: 18px; --radius-pill: 999px;
  --angle: -40deg;
  --cut: 12px;                      /* the one forward cut on a button or badge */
  --ease-out: cubic-bezier(.2, .8, .2, 1);
  --dur-arrive: 420ms;
  --dur-quick: 160ms;
  --measure: 34rem;                 /* reading width */
  --page-max: 72rem;

  /* Semantic, light theme (Paper) */
  color-scheme: only light;         /* Paper is the identity; "only" also stops Android browsers forcing a dark render */
  --bg-page: #faf6ee;
  --bg-card: #fffdf8;
  --bg-sunken: #f1ecdd;
  --bg-inverse: #0e3733;            /* the pick block: the one place the UI raises its voice */
  --border-hairline: #e7e0d2;
  --border-strong: #d9cfba;
  --text-primary: #1f1f1d;
  --text-heading: #154e4a;
  --text-muted: #595959;
  --text-faint: #6e685a;            /* v1 #867f70 failed 4.5:1 */
  --text-on-inverse: #faf6ee;
  --text-on-inverse-muted: #bcd7d3;
  --accent: #e26b43;                /* the tick and the one conversion button per surface */
  --accent-text: #a84724;           /* v1 #c0542f failed 4.5:1 */
  --on-accent: #1f1f1d;             /* v1 paper on coral was 3.04:1; ink is 5.05:1 */
  --tick: #e26b43;
  --tick-on-inverse: #e26b43;       /* 3.98:1 on counsel-900 */
  --mark-win: #154e4a;              /* a factor the pick wins */
  --mark-level: #4f938d;
  --mark-give: #857c68;
  --weight-on: #2c7873; --weight-off: #d9cfba;
  --fn-success: #2f9e73; --fn-success-text: #18704d; --fn-success-tint: #e4f2ea;
  --fn-attention: #e0a53e; --fn-attention-text: #8a5a0e; --fn-attention-tint: #fbefd6;
  --fn-neutral: #bcb29a; --fn-neutral-text: #6b6455; --fn-neutral-tint: #f0ece0;
  --fn-critical: #c0472d; --fn-critical-text: #97351f; --fn-critical-tint: #f7e0d8;
  --chart-line: #2c7873; --chart-area: rgba(44, 120, 115, .10); --chart-grid: #e7e0d2;
  --chart-low: #c4e3d1; --chart-usual: #e4ddcc; --chart-high: #f3d9a4;
  --funnel-1: #e2eeec; --funnel-2: #bcd7d3; --funnel-3: #86b5b0; --funnel-4: #4f938d; --funnel-5: #154e4a;
  --shadow-card: 0 1px 2px rgba(21, 78, 74, .05), 0 10px 26px rgba(21, 78, 74, .07);
  --shadow-raised: 0 2px 4px rgba(21, 78, 74, .06), 0 18px 40px rgba(21, 78, 74, .10);
  --wa-buyer: #e2eeec;              /* demo threads: Shopwise colours, not WhatsApp's */
  --wa-advisor: #fffdf8;
  --wa-ground: #f1ecdd;
}

/* Counsel Dark: opt in with data-theme="dark" on <html>. Shopwise surfaces stay on Paper whatever the phone's setting
   (Plan 11, 17 October): a forwarded why-page and a shared screenshot look the same for every family member. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg-page: #0e3733; --bg-card: #12403b; --bg-sunken: #0b2a27; --bg-inverse: #1c5e59;
  --border-hairline: #24544e; --border-strong: #2c7873;
  --text-primary: #f3eee4; --text-heading: #e2eeec; --text-muted: #9fc3be; --text-faint: #86a9a4;
  --text-on-inverse: #faf6ee; --text-on-inverse-muted: #bcd7d3;
  --accent: #ea876a; --accent-text: #f1ab94; --on-accent: #1f1f1d;
  --tick: #ea876a; --tick-on-inverse: #f1ab94;
  --mark-win: #e2eeec; --mark-level: #4f938d; --mark-give: #6f938e;
  --weight-on: #bcd7d3; --weight-off: #24544e;
  --fn-success: #43b085; --fn-success-text: #7fd9b1; --fn-success-tint: #10352a;
  --fn-attention: #e8b968; --fn-attention-text: #e8c07a; --fn-attention-tint: #3a2e12;
  --fn-neutral: #7c7768; --fn-neutral-text: #c3bca9; --fn-neutral-tint: #2a2820;
  --fn-critical: #e0715a; --fn-critical-text: #f0a593; --fn-critical-tint: #3a1a12;
  --chart-line: #86b5b0; --chart-area: rgba(134, 181, 176, .14); --chart-grid: #24544e;
  --chart-low: #1d5a45; --chart-usual: #24544e; --chart-high: #5a4718;
  --funnel-1: #154e4a; --funnel-2: #1c5e59; --funnel-3: #2c7873; --funnel-4: #4f938d; --funnel-5: #bcd7d3;
  --shadow-card: 0 1px 2px rgba(0, 0, 0, .30), 0 10px 26px rgba(0, 0, 0, .45);
  --shadow-raised: 0 2px 4px rgba(0, 0, 0, .35), 0 18px 40px rgba(0, 0, 0, .55);
  --wa-buyer: #1c5e59; --wa-advisor: #12403b; --wa-ground: #0b2a27;
}

/* Indian scripts: system fonts carry them; headings drop to the body face (Gabarito has no Indic glyphs)
   and lines open up for matras. Prices stay in Latin numerals and keep the display face. */
:root:is(:lang(hi), :lang(mr), :lang(te), :lang(ta), :lang(kn), :lang(ml), :lang(bn), :lang(gu), :lang(pa), :lang(or)) {
  --font-display: var(--font-body);
  --lh-body: var(--lh-indic);
  --lh-snug: 1.5;
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-arrive: 0ms; --dur-quick: 0ms; }
}