/* ============================================================================
   SORBET — Design tokens
   A warm, pastel, ink-drawn system for consumer mobile apps.
   Layer 1 of 2. Load this before components.css.

   Naming:  --<category>-<role>[-<step>]
   Ramps:   100 wash · 300 light · 500 base · 700 deep

   Contrast contract (measured, both themes):
     · ink on 100 / 300 / 500 ..... 9.2:1 – 16.1:1   always safe
     · 700 on 100 ................. 4.7:1 –  6.3:1   safe for text
     · 700 on 300 ................. 3.9:1 –  5.2:1   large text or icons only
   So: text on a pastel is ink. The 700 step is for a tinted label on a
   wash, and for icon strokes — not for body copy on a 300.
   ========================================================================== */

:root {
  color-scheme: light dark;

  /* ── Palette · warm neutrals ─────────────────────────────────────────────
     Greys are biased warm (yellow-red) so they sit on cream without going
     blue. Never use a pure #808080 here — it reads as unfinished. */
  --ink-900: #141210;
  --ink-700: #3a342c;
  --ink-500: #6b6357;
  --ink-300: #a39b8d;
  --ink-200: #c9c1b4;
  --ink-100: #e5dfd3;
  --cream-deep: #f4eddf;
  --cream: #fbf6ec;
  --paper: #ffffff;

  /* ── Palette · tone ramps ───────────────────────────────────────────────
     Seven families. Large flat fields use 500; washes and card grounds use
     100; 700 is the only step guaranteed legible as text on 100/300. */
  --blush-100: #fce9f2;  --blush-300: #f8cde3;  --blush-500: #f4b4d4;  --blush-700: #a8477b;
  --butter-100: #fbf3ce; --butter-300: #f7e49a; --butter-500: #f2d45f; --butter-700: #7d6408;
  --sky-100: #e5eff9;    --sky-300: #c6dcf1;    --sky-500: #a7c6ea;    --sky-700: #345d8e;
  --sage-100: #e9efda;   --sage-300: #cbdaaf;   --sage-500: #a9be7c;   --sage-700: #4d6229;
  --lilac-100: #edebfa;  --lilac-300: #dad6f4;  --lilac-500: #c6c0ee;  --lilac-700: #554a9c;
  --apricot-100: #fbead1;--apricot-300: #f6ce94;--apricot-500: #efaf54;--apricot-700: #8a5307;
  --mint-100: #e4f3ed;   --mint-300: #c4e7d9;   --mint-500: #9fd6c0;   --mint-700: #276a51;

  /* ── Semantic · surfaces ───────────────────────────────────────────────── */
  --bg-canvas: var(--cream);
  --bg-surface: var(--paper);
  --bg-sunken: var(--cream-deep);
  --bg-inverse: var(--ink-900);
  --bg-scrim: rgb(20 18 16 / 0.42);

  /* ── Semantic · foreground ────────────────────────────────────────────
     Three text greys, each ≥4.5:1 on both cream and paper. --fg-disabled is
     the only neutral that fails contrast, and it is never used for text a
     user has to read. */
  --fg-primary: var(--ink-900);    /* 17.4:1 on cream */
  --fg-secondary: var(--ink-700);  /* 10.1:1 */
  --fg-muted: var(--ink-500);      /*  5.5:1 — hints, placeholders, units */
  --fg-disabled: var(--ink-300);
  --fg-on-inverse: var(--cream);
  --fg-on-tone: var(--ink-900);    /* ink always wins on a 500 pastel */

  /* ── Semantic · lines ──────────────────────────────────────────────────── */
  --border-subtle: var(--ink-100);
  --border-strong: var(--ink-200);
  --border-ink: var(--ink-900);

  /* ── Semantic · action ─────────────────────────────────────────────────── */
  --action-solid: var(--ink-900);
  --action-solid-fg: var(--cream);
  --accent: var(--blush-500);
  --accent-fg: var(--ink-900);
  --accent-wash: var(--blush-100);
  --focus-ring: var(--ink-900);

  /* ── Semantic · status ─────────────────────────────────────────────────── */
  --positive: #3f7a4e;      --positive-wash: #e3efe4;   /* 4.8:1 on cream */
  --caution: #8a6209;       --caution-wash: #f9efd4;    /* 5.1:1 */
  --critical: #c0402c;      --critical-wash: #fbe6e1;   /* 4.9:1 */

  /* ── Tone channel ───────────────────────────────────────────────────────
     Any component reads these three. Setting [data-tone] on an ancestor
     recolours the whole subtree — see components.css. */
  --tone-100: var(--blush-100);
  --tone-300: var(--blush-300);
  --tone-500: var(--blush-500);
  --tone-700: var(--blush-700);

  /* ── Typography · families ─────────────────────────────────────────────
     No webfonts: the CSP on published pages blocks font CDNs, and a silent
     fallback is worse than a chosen stack. Personality comes from weight,
     width and tracking rather than an exotic face. */
  --font-display: ui-sans-serif, system-ui, -apple-system, "Segoe UI Variable Display",
    "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-body: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  --font-accent: "Hoefler Text", "Iowan Old Style", "Palatino Linotype", Palatino,
    "Book Antiqua", Georgia, serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* ── Typography · scale ────────────────────────────────────────────────
     Display steps are set tight (0.88–0.96) and negatively tracked; body
     steps are set loose. The gap between the two is the system's voice. */
  --text-hero: 3.75rem;      --leading-hero: 0.88;   --track-hero: -0.04em;
  --text-display: 2.75rem;   --leading-display: 0.92;--track-display: -0.032em;
  --text-title: 1.9rem;      --leading-title: 1.0;   --track-title: -0.026em;
  --text-heading: 1.375rem;  --leading-heading: 1.15;--track-heading: -0.018em;
  --text-subhead: 1.0625rem; --leading-subhead: 1.3; --track-subhead: -0.01em;
  --text-body: 0.9375rem;    --leading-body: 1.5;    --track-body: 0em;
  --text-small: 0.8125rem;   --leading-small: 1.45;  --track-small: 0.004em;
  --text-label: 0.6875rem;   --leading-label: 1.2;   --track-label: 0.1em;

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-bold: 700;
  --weight-heavy: 800;

  /* ── Space · 4pt base ──────────────────────────────────────────────────── */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;

  /* Gutter every full-bleed mobile surface uses. One value, no exceptions. */
  --gutter: var(--space-5);

  /* ── Radius ────────────────────────────────────────────────────────────
     Nothing in this system has a sharp corner except a rule. Nested corners
     follow the inner = outer − padding rule. */
  --radius-xs: 8px;
  --radius-sm: 12px;
  --radius-md: 18px;
  --radius-lg: 24px;
  --radius-xl: 32px;
  --radius-2xl: 40px;
  --radius-pill: 999px;

  /* ── Elevation ─────────────────────────────────────────────────────────
     Shadows are warm and low-contrast: this is a paper system, not a glass
     one. Never stack more than one level on a screen. */
  --shadow-1: 0 1px 2px rgb(35 27 15 / 0.05), 0 2px 8px rgb(35 27 15 / 0.05);
  --shadow-2: 0 2px 4px rgb(35 27 15 / 0.05), 0 10px 26px rgb(35 27 15 / 0.09);
  --shadow-3: 0 6px 12px rgb(35 27 15 / 0.07), 0 22px 48px rgb(35 27 15 / 0.14);
  --shadow-inset: inset 0 1px 0 rgb(255 255 255 / 0.5);

  /* ── Motion ────────────────────────────────────────────────────────────
     One easing curve does almost everything. --ease-spring is reserved for
     things that appear (sheets, the FAB, toasts). */
  --duration-instant: 90ms;
  --duration-fast: 160ms;
  --duration-base: 240ms;
  --duration-slow: 380ms;
  --ease-standard: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-exit: cubic-bezier(0.4, 0, 1, 1);
  --ease-spring: cubic-bezier(0.34, 1.4, 0.5, 1);

  /* ── Layering ──────────────────────────────────────────────────────────── */
  --z-base: 0;
  --z-sticky: 10;
  --z-tabbar: 20;
  --z-scrim: 30;
  --z-sheet: 40;
  --z-toast: 50;

  /* ── Touch ─────────────────────────────────────────────────────────────── */
  --target-min: 44px;
}

/* ── Tone selectors ────────────────────────────────────────────────────────
   [data-tone] is the system's single recolouring mechanism. It sets the
   --tone-* channel; every component styles itself from that channel only. */
[data-tone="blush"]   { --tone-100: var(--blush-100);   --tone-300: var(--blush-300);   --tone-500: var(--blush-500);   --tone-700: var(--blush-700); }
[data-tone="butter"]  { --tone-100: var(--butter-100);  --tone-300: var(--butter-300);  --tone-500: var(--butter-500);  --tone-700: var(--butter-700); }
[data-tone="sky"]     { --tone-100: var(--sky-100);     --tone-300: var(--sky-300);     --tone-500: var(--sky-500);     --tone-700: var(--sky-700); }
[data-tone="sage"]    { --tone-100: var(--sage-100);    --tone-300: var(--sage-300);    --tone-500: var(--sage-500);    --tone-700: var(--sage-700); }
[data-tone="lilac"]   { --tone-100: var(--lilac-100);   --tone-300: var(--lilac-300);   --tone-500: var(--lilac-500);   --tone-700: var(--lilac-700); }
[data-tone="apricot"] { --tone-100: var(--apricot-100); --tone-300: var(--apricot-300); --tone-500: var(--apricot-500); --tone-700: var(--apricot-700); }
[data-tone="mint"]    { --tone-100: var(--mint-100);    --tone-300: var(--mint-300);    --tone-500: var(--mint-500);    --tone-700: var(--mint-700); }

/* ============================================================================
   NIGHT — the same system after dark.
   The ground goes to warm charcoal, not black. Pastels are pulled down in
   luminance and desaturated ~10% so they stop glowing; the 700 steps are
   pulled *up* because they now have to read on a dark ground.
   ========================================================================== */

@media (prefers-color-scheme: dark) {
  :root {
    --ink-900: #f3ece0;
    --ink-700: #d6cdbe;
    --ink-500: #a49a89;
    --ink-300: #7b7264;
    --ink-200: #4a443a;
    --ink-100: #332e27;
    --cream-deep: #221e18;
    --cream: #17140f;
    --paper: #211d17;

    --blush-100: #3a2530;  --blush-300: #6d4358;  --blush-500: #d495b4;  --blush-700: #f2c3da;
    --butter-100: #362f16; --butter-300: #6b5c22; --butter-500: #d7b94b; --butter-700: #f6e6a4;
    --sky-100: #1d2a37;    --sky-300: #37536e;    --sky-500: #8db0d6;    --sky-700: #cfe2f5;
    --sage-100: #262d1b;   --sage-300: #4a5a31;   --sage-500: #93a96a;   --sage-700: #d5e3b7;
    --lilac-100: #272437;  --lilac-300: #464068;  --lilac-500: #aca5da;  --lilac-700: #ddd8f6;
    --apricot-100: #392713;--apricot-300: #6f4b1d;--apricot-500: #d99c46;--apricot-700: #f7d6a5;
    --mint-100: #1b2e28;   --mint-300: #2f5648;   --mint-500: #86c1aa;   --mint-700: #c3e8d8;

    --bg-inverse: #f3ece0;
    --bg-scrim: rgb(8 7 5 / 0.6);
    --fg-on-inverse: #17140f;
    --fg-on-tone: #17140f;

    --action-solid: #f3ece0;
    --action-solid-fg: #17140f;
    --accent: var(--blush-500);
    --accent-fg: #17140f;
    --focus-ring: #f3ece0;

    --positive: #7fb98c;      --positive-wash: #1f2f24;
    --caution: #d9ad55;       --caution-wash: #332913;
    --critical: #e88571;      --critical-wash: #3a201a;

    --shadow-1: 0 1px 2px rgb(0 0 0 / 0.3), 0 2px 8px rgb(0 0 0 / 0.28);
    --shadow-2: 0 2px 4px rgb(0 0 0 / 0.32), 0 10px 26px rgb(0 0 0 / 0.4);
    --shadow-3: 0 6px 12px rgb(0 0 0 / 0.34), 0 22px 48px rgb(0 0 0 / 0.5);
    --shadow-inset: inset 0 1px 0 rgb(255 255 255 / 0.05);
  }
}

/* The viewer's explicit toggle must beat the OS preference in both
   directions, so both themes are restated as attribute selectors. */
:root[data-theme="light"] {
  --ink-900: #141210;  --ink-700: #3a342c;  --ink-500: #6b6357;
  --ink-300: #a39b8d;  --ink-200: #c9c1b4;  --ink-100: #e5dfd3;
  --cream-deep: #f4eddf; --cream: #fbf6ec; --paper: #ffffff;

  --blush-100: #fce9f2;  --blush-300: #f8cde3;  --blush-500: #f4b4d4;  --blush-700: #a8477b;
  --butter-100: #fbf3ce; --butter-300: #f7e49a; --butter-500: #f2d45f; --butter-700: #7d6408;
  --sky-100: #e5eff9;    --sky-300: #c6dcf1;    --sky-500: #a7c6ea;    --sky-700: #345d8e;
  --sage-100: #e9efda;   --sage-300: #cbdaaf;   --sage-500: #a9be7c;   --sage-700: #4d6229;
  --lilac-100: #edebfa;  --lilac-300: #dad6f4;  --lilac-500: #c6c0ee;  --lilac-700: #554a9c;
  --apricot-100: #fbead1;--apricot-300: #f6ce94;--apricot-500: #efaf54;--apricot-700: #8a5307;
  --mint-100: #e4f3ed;   --mint-300: #c4e7d9;   --mint-500: #9fd6c0;   --mint-700: #276a51;

  --bg-inverse: #141210;
  --bg-scrim: rgb(20 18 16 / 0.42);
  --fg-on-inverse: #fbf6ec;
  --fg-on-tone: #141210;
  --action-solid: #141210;
  --action-solid-fg: #fbf6ec;
  --accent-fg: #141210;
  --focus-ring: #141210;

  --positive: #3f7a4e;  --positive-wash: #e3efe4;
  --caution: #8a6209;   --caution-wash: #f9efd4;
  --critical: #c0402c;  --critical-wash: #fbe6e1;

  --shadow-1: 0 1px 2px rgb(35 27 15 / 0.05), 0 2px 8px rgb(35 27 15 / 0.05);
  --shadow-2: 0 2px 4px rgb(35 27 15 / 0.05), 0 10px 26px rgb(35 27 15 / 0.09);
  --shadow-3: 0 6px 12px rgb(35 27 15 / 0.07), 0 22px 48px rgb(35 27 15 / 0.14);
  --shadow-inset: inset 0 1px 0 rgb(255 255 255 / 0.5);
}

:root[data-theme="dark"] {
  --ink-900: #f3ece0;  --ink-700: #d6cdbe;  --ink-500: #a49a89;
  --ink-300: #7b7264;  --ink-200: #4a443a;  --ink-100: #332e27;
  --cream-deep: #221e18; --cream: #17140f; --paper: #211d17;

  --blush-100: #3a2530;  --blush-300: #6d4358;  --blush-500: #d495b4;  --blush-700: #f2c3da;
  --butter-100: #362f16; --butter-300: #6b5c22; --butter-500: #d7b94b; --butter-700: #f6e6a4;
  --sky-100: #1d2a37;    --sky-300: #37536e;    --sky-500: #8db0d6;    --sky-700: #cfe2f5;
  --sage-100: #262d1b;   --sage-300: #4a5a31;   --sage-500: #93a96a;   --sage-700: #d5e3b7;
  --lilac-100: #272437;  --lilac-300: #464068;  --lilac-500: #aca5da;  --lilac-700: #ddd8f6;
  --apricot-100: #392713;--apricot-300: #6f4b1d;--apricot-500: #d99c46;--apricot-700: #f7d6a5;
  --mint-100: #1b2e28;   --mint-300: #2f5648;   --mint-500: #86c1aa;   --mint-700: #c3e8d8;

  --bg-inverse: #f3ece0;
  --bg-scrim: rgb(8 7 5 / 0.6);
  --fg-on-inverse: #17140f;
  --fg-on-tone: #17140f;
  --action-solid: #f3ece0;
  --action-solid-fg: #17140f;
  --accent-fg: #17140f;
  --focus-ring: #f3ece0;

  --positive: #7fb98c;  --positive-wash: #1f2f24;
  --caution: #d9ad55;   --caution-wash: #332913;
  --critical: #e88571;  --critical-wash: #3a201a;

  --shadow-1: 0 1px 2px rgb(0 0 0 / 0.3), 0 2px 8px rgb(0 0 0 / 0.28);
  --shadow-2: 0 2px 4px rgb(0 0 0 / 0.32), 0 10px 26px rgb(0 0 0 / 0.4);
  --shadow-3: 0 6px 12px rgb(0 0 0 / 0.34), 0 22px 48px rgb(0 0 0 / 0.5);
  --shadow-inset: inset 0 1px 0 rgb(255 255 255 / 0.05);
}