/* ==========================================================================
   Salida design tokens
   Canonical values for every Salida page (landing, request flow, admin).
   Source of truth for the rationale: docs/DESIGN.md. Change the doc first,
   then this file. Nothing here is a style rule; it is custom properties only,
   so it is safe to link from every page before any other stylesheet.

   Theme model
   - Light is the default and lives on :root.
   - Dark ("dock mode") is applied twice with identical values: once under
     prefers-color-scheme for people who follow the OS, once under
     [data-theme="dark"] for the in-page toggle. [data-theme="light"] opts out
     of the OS dark theme. The attribute is set by a few lines of script that
     read localStorage inside try/catch (see DESIGN.md section 13).
   - prefers-contrast: more thickens borders and removes tint fills.
   - prefers-reduced-motion: reduce zeroes every duration token. The base
     stylesheet also removes transitions outright.
   Contrast ratios in the comments are WCAG 2.x relative-luminance ratios
   computed for the pair named in the comment. Target is 2.2 AA: 4.5:1 for
   text, 3:1 for input borders, focus rings and other non-text contrast.
   ========================================================================== */

/* ---------- Light (default) ---------- */
:root {
  color-scheme: light;

  /* Surfaces */
  --bg:#F5F7F7;
  --surface:#FFFFFF;
  --surface-2:#EDF1F1;

  /* Ink */
  --ink:#0D1B1E;        /* 17.61 on surface, 16.38 on bg */
  --ink-2:#4A5A5E;      /* 6.70 on bg, 6.33 on surface-2 */

  /* Lines: --line is decorative (exempt from 3:1); --line-strong is for
     input borders, dividers that carry meaning, and chart lines */
  --line:#D5DDDE;
  --line-strong:#7A8A8D;   /* 3.59 on surface */

  /* Action color: one deep spruce green, used for primary actions only */
  --brand:#0A6B50;         /* on-brand text 6.50 on brand */
  --brand-hover:#08573F;   /* on-brand text 8.59 on brand-hover */
  --on-brand:#FFFFFF;
  --brand-tint:#E3F1EC;    /* brand text 5.59 on tint, ink 15.14 on tint */

  /* Semantic status colors (text) and their fills (tint) */
  --info:#1F5F8B;   --info-tint:#E6F0F7;     /* info 6.84 on surface, 5.92 on tint */
  --warn:#8A4B00;   --warn-tint:#FFF1D6;     /* warn 6.80 on surface, 6.09 on tint  (short-dated, time pressure) */
  --danger:#B42318; --danger-tint:#FDECEA;   /* danger 6.57 on surface, 5.75 on tint */

  /* Focus ring: judged against the page background because of the offset */
  --focus:#1F5F8B;         /* 6.37 on bg */
  --focus-w:3px;
  --focus-offset:2px;

  /* Border weight (2px under prefers-contrast: more) */
  --border-w:1px;

  /* ---------- Type ---------- */
  --font-display:"Archivo", system-ui, Arial, sans-serif;
  --font-display-stretch:112.5%;   /* SemiExpanded width; set font-stretch with the family */
  --font-body:"Atkinson Hyperlegible Next", system-ui, Arial, sans-serif;
  --font-mono:"Atkinson Hyperlegible Mono", ui-monospace, Menlo, Consolas, monospace;

  --fs-h1:clamp(2rem, 1.55rem + 2.2vw, 3.25rem);   /* 32 to 52 px */
  --lh-h1:1.08;
  --ls-h1:-0.01em;
  --fs-h2:clamp(1.5rem, 1.3rem + 1vw, 2.125rem);   /* 24 to 34 px */
  --lh-h2:1.15;
  --fs-h3:1.25rem;                                  /* 20 px */
  --lh-h3:1.3;
  --fs-lead:1.1875rem;                              /* 19 px */
  --fs-body:1.0625rem;                              /* 17 px on phones; 18 px from 768 px, see below */
  --fs-flow:1.125rem;                               /* 18 px body inside the request flow at every width */
  --lh-body:1.55;
  --fs-meta:0.9375rem;                              /* 15 px, the smallest text size allowed */
  --fs-label:1rem;
  --fw-label:600;
  --fs-input:1rem;                                  /* 16 px minimum in inputs so phones do not zoom */
  --measure:70ch;                                   /* 65 to 75 characters */

  /* ---------- Space (4 px base) ---------- */
  --space-1:4px;
  --space-2:8px;
  --space-3:12px;
  --space-4:16px;
  --space-5:24px;
  --space-6:32px;
  --space-7:48px;
  --space-8:64px;
  --space-9:96px;
  --section-y:64px;        /* 96 px from 768, 128 px from 1200, see below */
  --gutter:16px;           /* 24 px from 768 */
  --container:1200px;

  /* ---------- Radius ladder ---------- */
  --r-chip:6px;
  --r-control:10px;        /* buttons, inputs, segmented controls */
  --r-card:14px;           /* cards, sheets, the load ticket */

  /* ---------- The single shadow (sheets and modals only) ---------- */
  --shadow-sheet:0 12px 32px rgb(13 27 30 / .16);
  /* Veil behind an open sheet. Darkens in both themes (a light veil on a dark page reads as
     greyed out); added by the 2026-10-15 review, mobile-design-2. */
  --scrim:rgb(13 27 30 / .45);

  /* ---------- Motion ---------- */
  --dur-press:120ms;
  --dur-hover:180ms;       /* hover, focus, expand */
  --dur-step:260ms;        /* step change, ticket print */
  --dur-press-exit:84ms;   /* exits run about 70% as long */
  --dur-hover-exit:126ms;
  --dur-step-exit:182ms;
  --ease-enter:cubic-bezier(.2,.8,.2,1);
  --ease-exit:cubic-bezier(.4,0,1,1);

  /* ---------- Touch ergonomics ---------- */
  --tap-min:48px;          /* every target outside the request flow */
  --tap-primary:56px;      /* primary buttons, stepper keys, inputs in the flow */
  --tile:64px;             /* choice tiles in the flow */
  --tap-gap:8px;           /* minimum space between adjacent targets */
  --bar-h:88px;            /* sticky bottom bar: 56 px button + 2 x 16 px padding; add env(safe-area-inset-bottom) at use */
  --bar-h-status:112px;    /* bar with the "Saved" status line above the button */
}

@media (min-width: 768px) {
  :root {
    --fs-body:1.125rem;
    --section-y:96px;
    --gutter:24px;
  }
}

@media (min-width: 1200px) {
  :root {
    --section-y:128px;
  }
}

/* ---------- Dark ("dock mode"), following the OS ---------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg:#0E1416;
    --surface:#151D20;
    --surface-2:#1C262A;
    --ink:#E8EEEE;        /* 15.83 on bg, 14.57 on surface (no pure white) */
    --ink-2:#A9B7BA;      /* 8.28 on surface, 7.48 on surface-2 */
    --line:#2A373B;
    --line-strong:#5F7276;   /* 3.38 on surface */
    --brand:#45C495;         /* on-brand text 7.44 on brand */
    --brand-hover:#5ED3A7;   /* on-brand text 8.81 on brand-hover */
    --on-brand:#06251B;      /* dark text on light green */
    --brand-tint:#10322A;    /* brand text 6.34 on tint, ink 11.84 on tint */
    --info:#7DB8E0;   --info-tint:#12283A;     /* 7.98 on surface, 7.05 on tint */
    --warn:#F2B544;   --warn-tint:#2E2410;     /* 9.34 on surface, 8.33 on tint */
    --danger:#FF8A7A; --danger-tint:#3A1A17;   /* 7.46 on surface, 6.84 on tint */
    --focus:#9AD9FF;         /* 12.16 on bg */
    --shadow-sheet:0 12px 32px rgb(0 0 0 / .45);
    --scrim:rgb(0 0 0 / .6);
  }
}

/* ---------- Dark ("dock mode"), chosen with the toggle ---------- */
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg:#0E1416;
  --surface:#151D20;
  --surface-2:#1C262A;
  --ink:#E8EEEE;        /* 15.83 on bg, 14.57 on surface (no pure white) */
  --ink-2:#A9B7BA;      /* 8.28 on surface, 7.48 on surface-2 */
  --line:#2A373B;
  --line-strong:#5F7276;   /* 3.38 on surface */
  --brand:#45C495;         /* on-brand text 7.44 on brand */
  --brand-hover:#5ED3A7;   /* on-brand text 8.81 on brand-hover */
  --on-brand:#06251B;      /* dark text on light green */
  --brand-tint:#10322A;    /* brand text 6.34 on tint, ink 11.84 on tint */
  --info:#7DB8E0;   --info-tint:#12283A;     /* 7.98 on surface, 7.05 on tint */
  --warn:#F2B544;   --warn-tint:#2E2410;     /* 9.34 on surface, 8.33 on tint */
  --danger:#FF8A7A; --danger-tint:#3A1A17;   /* 7.46 on surface, 6.84 on tint */
  --focus:#9AD9FF;         /* 12.16 on bg */
  --shadow-sheet:0 12px 32px rgb(0 0 0 / .45);
  --scrim:rgb(0 0 0 / .6);
}

/* ---------- High contrast ----------
   Decorative lines become strong lines, tint fills become plain surface so
   status text sits on the highest-contrast background, borders double.
   The selector list matches the specificity of the dark blocks above, and
   this block comes last, so it wins in every theme. */
@media (prefers-contrast: more) {
  :root,
  :root:not([data-theme="light"]),
  :root[data-theme="dark"] {
    --line:var(--line-strong);
    --brand-tint:var(--surface);
    --info-tint:var(--surface);
    --warn-tint:var(--surface);
    --danger-tint:var(--surface);
    --border-w:2px;
  }
}

/* ---------- Reduced motion ----------
   Non-essential motion is removed, never slowed. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-press:0ms;
    --dur-hover:0ms;
    --dur-step:0ms;
    --dur-press-exit:0ms;
    --dur-hover-exit:0ms;
    --dur-step-exit:0ms;
  }
}