/* ==========================================================================
   Kith design tokens · Direction 3, "Your People".
   A scrapbook of the people in your life: postcard white, pillar-box navy ink,
   and three stamp colours (sea glass, beach-hut yellow, stamp coral) that only
   ever mean identity, never state. One brand hue (258, navy) drives the neutrals.
   ========================================================================== */
:root {
  color-scheme: light;

  /* ---- Colour: neutrals, tinted toward the navy ink ---- */
  --bg:            oklch(0.985 0.004 250);   /* postcard white, chroma ~0, cool not cream */
  --surface:       oklch(0.970 0.007 250);
  --surface-2:     oklch(0.948 0.010 250);
  --surface-3:     oklch(0.920 0.014 250);
  --ink:           oklch(0.27 0.07 258);     /* pillar-box navy ink */
  --ink-2:         oklch(0.34 0.06 258);
  --muted:         oklch(0.47 0.045 258);
  --muted-2:       oklch(0.62 0.03 258);     /* decoration and disabled only, never text */
  --line:          oklch(0.89 0.012 250);
  --line-strong:   oklch(0.80 0.020 250);

  /* ---- Colour: brand ---- */
  --primary:        oklch(0.27 0.07 258);    /* actions are written in ink */
  --primary-strong: oklch(0.21 0.06 258);
  --primary-soft:   oklch(0.950 0.018 255);
  --primary-soft-2: oklch(0.900 0.035 255);
  --on-primary:     oklch(0.985 0.004 250);

  --accent:         oklch(0.72 0.09 185);    /* sea glass: the brand ground */
  --accent-strong:  oklch(0.62 0.09 185);
  --accent-soft:    oklch(0.945 0.03 185);
  --on-accent:      oklch(0.27 0.07 258);

  /* The stamp set. Identity only: a person, a companion, a moment. */
  --sea:   oklch(0.72 0.09 185);
  --sun:   oklch(0.87 0.14 92);   --sun-soft:   oklch(0.955 0.06 95);
  --coral: oklch(0.68 0.16 40);   --coral-soft: oklch(0.94 0.045 45);
  --tape:  oklch(0.88 0.06 88 / 0.78);

  /* One navy band per page, maximum. */
  --drench:          oklch(0.24 0.065 258);
  --drench-2:        oklch(0.30 0.07 258);
  --on-drench:       oklch(0.970 0.006 250);
  --on-drench-muted: oklch(0.80 0.03 250);
  --drench-line:     oklch(0.40 0.06 258);

  /* ---- Colour: semantic. STATES ONLY, always with an icon and a word ---- */
  --success: oklch(0.52 0.13 150); --success-soft: oklch(0.95 0.04 150); --success-ink: oklch(0.38 0.10 150);
  --warning: oklch(0.72 0.15 65);  --warning-soft: oklch(0.96 0.05 75);  --warning-ink: oklch(0.46 0.12 60);
  --danger:  oklch(0.53 0.19 27);  --danger-soft:  oklch(0.95 0.035 25); --danger-ink:  oklch(0.45 0.17 27);
  --info:    oklch(0.50 0.10 240); --info-soft:    oklch(0.95 0.03 240); --info-ink:    oklch(0.40 0.10 240);

  /* Charts: a ramp of the ink hue, not the stamp or semantic colours. */
  --c-1: oklch(0.90 0.04 258); --c-2: oklch(0.76 0.08 258);
  --c-3: oklch(0.58 0.11 258); --c-4: oklch(0.42 0.10 258); --c-5: oklch(0.28 0.07 258);

  /* ---- Typography ---- */
  --font-display: "Parkinsans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body:    "Parkinsans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-hand:    "Playwrite GB S", "Segoe Script", cursive;   /* Wren's voice, nowhere else */
  --font-mono:    ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Brand scale, fluid */
  --fs-display: clamp(2.75rem, 1.5rem + 4.2vw, 5.5rem);
  --fs-h1:      clamp(2.25rem, 1.4rem + 2.8vw, 4rem);
  --fs-h2:      clamp(1.75rem, 1.3rem + 1.6vw, 2.75rem);
  --fs-h3:      clamp(1.3rem, 1.12rem + 0.7vw, 1.75rem);
  --fs-lead:    clamp(1.125rem, 1.05rem + 0.35vw, 1.3125rem);
  --fs-body:    1.0625rem;
  --fs-small:   0.9375rem;
  --fs-xs:      0.8125rem;

  /* Product scale, fixed */
  --t-28: 1.75rem; --t-22: 1.375rem; --t-18: 1.125rem; --t-16: 1rem;
  --t-15: 0.9375rem; --t-14: 0.875rem; --t-13: 0.8125rem; --t-12: 0.75rem; --t-11: 0.6875rem;

  --lh-tight: 1.0; --lh-snug: 1.2; --lh-body: 1.6; --lh-relaxed: 1.75; --lh-hand: 1.75;
  --tracking-display: -0.04em; --tracking-ui: 0;

  /* ---- Spacing: 4px base ---- */
  --s-1: 0.25rem; --s-2: 0.5rem;  --s-3: 0.75rem; --s-4: 1rem;   --s-5: 1.5rem;
  --s-6: 2rem;    --s-7: 3rem;    --s-8: 4rem;    --s-9: 5rem;   --s-10: 6rem; --s-12: 8rem;
  --section:       clamp(4.5rem, 3rem + 5vw, 8rem);
  --section-tight: clamp(3rem, 2rem + 3vw, 5rem);
  --gutter:        clamp(1rem, 4vw, 2.5rem);
  --container: 1240px; --container-wide: 1400px; --container-narrow: 760px; --measure: 65ch;

  /* ==========================================================================
     FORM LAYER · archetype "Paper" (a Soft variant).
     Things are cut, printed and taped, not drawn in boxes. Small paper corners,
     depth from a lifted-paper shadow, no outlines around cards, roomy rows.
     ========================================================================== */

  /* 1. Shape: paper is cut square-ish; controls are friendlier; sheets round. */
  --r-ctl: 6px; --r-card: 4px; --r-lg: 14px; --r-full: 999px;

  /* 2. Border weight: hairlines inside, 1.5px on controls, dashed for "can be torn off". */
  --bw: 1px; --bw-strong: 1.5px;
  --rule: var(--bw) solid var(--line);
  --rule-strong: var(--bw-strong) solid var(--line-strong);
  --rule-tear: var(--bw) dashed var(--line-strong);

  /* 3. Elevation model: lifted paper. One soft offset shadow, held everywhere. */
  --elev-card:  0 10px 24px -14px oklch(0.22 0.06 258 / 0.45);
  --elev-pop:   0 18px 40px -16px oklch(0.22 0.06 258 / 0.40);
  --elev-modal: 0 32px 64px -20px oklch(0.22 0.06 258 / 0.40);
  --press:      0 2px 0 var(--primary-strong);   /* a key you can press */
  --press-soft: 0 2px 0 var(--ink);

  /* 4. Density: a companion app is held in one hand at night. Roomy. */
  --h-ctl: 46px; --h-ctl-sm: 36px; --h-row: 52px; --h-row-dense: 44px;
  --pad-card: 1.125rem; --gap-grid: var(--s-5);

  /* 5. Dividers: whitespace between things, hairlines between rows, dashed for slips. */
  --cell-rule: none;
  --row-rule: var(--rule);

  /* 6. Headings: Parkinsans heavy, sentence case, tight. */
  --wt-head: 800; --wt-head-ui: 700; --wt-body: 400;
  --tracking-heading: -0.03em;
  --case-head: none;

  /* Paper turns: brand register only. The product register sits square. */
  --tilt-1: -1.5deg; --tilt-2: 2deg; --tilt-3: -3.5deg;

  /* ---- Legacy elevation names used by the prototype chrome ---- */
  --e-1: 0 1px 2px oklch(0.22 0.06 258 / 0.08);
  --e-2: 0 6px 16px -8px oklch(0.22 0.06 258 / 0.3);
  --e-3: 0 18px 40px -16px oklch(0.22 0.06 258 / 0.4);

  /* ---- Motion: paper settles, handwriting writes ---- */
  --dur-1: 140ms; --dur-2: 220ms; --dur-3: 360ms;
  --ease: cubic-bezier(0.2, 0, 0, 1);
  --ease-out: cubic-bezier(0.25, 1, 0.5, 1);
  --write-step: 16ms;

  /* ---- Prototype chrome ---- */
  --device: oklch(0.17 0.02 258);
  --pocbar-h: 44px;
  --z-sticky: 20; --z-layer: 60; --z-toast: 80; --z-pocbar: 90; --z-tour: 100;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important; animation-iteration-count: 1 !important;
    animation-delay: 0ms !important;
    transition-duration: 0.001ms !important; scroll-behavior: auto !important;
  }
}