/*
 * SeatLink v3 design tokens (3.02.001; palette changed to deep teal + apricot in 3.02.006).
 * The ONLY place a colour value may be written. `python tests/contrast.py` verifies every pair below (WCAG 2.2 AA and far above):
 *   ink on canvas/white 16-18:1 | ink on apricot 10:1 | white on deep teal 8.9:1 | secondary text 5.4-9:1 | control border 4.3-4.8:1 (needs 3:1)
 * Direction: venue wayfinding signage - cool neutrals, near-black ink for text, DEEP TEAL for structure (rail, table plates,
 * links), ONE apricot signal reserved for "look here": the primary action, the current location, and a row that just changed.
 * Warnings are caution yellow so apricot never reads as "careful", and red stays the only "problem" colour.
 */
@layer tokens, base, components, pages, utilities;

@layer tokens {
  :root {
    color-scheme: light;

    /* ink and surfaces */
    --ink: #14171c;
    --ink-2: #424a57;            /* secondary text */
    --ink-3: #5b6472;            /* hints, placeholders (5.4:1 on canvas) */
    --canvas: #f2f3f5;
    --surface: #ffffff;
    --surface-2: #f7f8fa;        /* table header, hover rows */
    --hairline: #d3d7de;         /* decorative dividers only */
    --control-border: #6b7380;   /* inputs, outlined buttons (>= 3:1 against both grounds) */
    --scrim: rgb(20 23 28 / 0.55);

    /* deep teal: structure and identity (rail, table plates, links, pressed chips); white text on it, never teal text on apricot */
    --teal: #0f5257;
    --teal-hover: #0b4146;
    --teal-soft: #e2f0f0;

    /* the signal: apricot with ink text, never apricot text */
    --signal: #ffb067;
    --signal-hover: #f59d47;
    --signal-press: #e58a33;
    --signal-soft: #ffe6cc;      /* a row that just changed, selection tint */

    /* meaning */
    --link: #0f5257;
    --ok: #14683f;     --ok-bg: #e4f4ea;
    --warn: #5e4a00;   --warn-bg: #fff4c4;       /* caution yellow: far from apricot (20 degrees) and from red */
    --bad: #b3261e;    --bad-bg: #fdeceb;
    --info: #1a5493;   --info-bg: #e5eefa;
    --neutral-bg: #e6e8ec;

    /* type: a humanist system sans (no font download), fixed rem scale ~1.2 */
    --font: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", Helvetica, Arial, sans-serif;
    --font-mono: ui-monospace, "Cascadia Mono", "SF Mono", Consolas, monospace;
    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-md: 1rem;
    --text-lg: 1.1875rem;
    --text-xl: 1.4375rem;
    --text-2xl: 1.75rem;
    --text-3xl: 2.125rem;
    --leading-tight: 1.2;
    --leading-body: 1.5;

    /* space (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;

    /* shape and depth: crisp edges, soft real shadows (offset + blur) */
    --r-1: 4px;
    --r-2: 6px;
    --shadow-1: 0 1px 2px rgb(20 23 28 / 0.08), 0 2px 6px rgb(20 23 28 / 0.06);
    --shadow-pop: 0 4px 8px rgb(20 23 28 / 0.1), 0 12px 28px rgb(20 23 28 / 0.18);

    /* controls: 40px on mouse, 44px on touch, 52px in kiosk density */
    --control-h: 2.5rem;
    --focus-color: var(--ink);
    --focus-width: 3px;   /* the ring itself is built where it is used so --focus-color can change per surface (.on-ink) */

    /* motion */
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --t-fast: 120ms;
    --t-med: 200ms;

    /* plates: the monumental table number */
    --plate-sm: 2.5rem;
    --plate-md: 4.5rem;
    --plate-lg: 7rem;

    /* layers */
    --z-sticky: 20;
    --z-popover: 40;
    --z-dialog: 60;
    --z-toast: 80;

    /* app shell: the rail is a deep teal surface; text pairs on it are checked by tests/contrast.py */
    --rail-w: 15rem;
    --rail-bg: var(--teal);
    --rail-ink: #ffffff;
    --rail-ink-2: #cfe3e4;
    --rail-hover: var(--teal-hover);
    --rail-line: #2f6f74;
    --scrim: rgb(20 23 28 / 0.55);
  }

  @media (pointer: coarse) {
    :root { --control-h: 2.75rem; }
  }

  /* touch density: event-day tablet/kiosk */
  [data-density="touch"] {
    --control-h: 3.25rem;
    --text-md: 1.125rem;
  }

  /* on a dark surface (teal rail, bulk bar, brand bar) the focus ring flips to white so it stays visible */
  .on-ink { --focus-color: #ffffff; }

  @media (prefers-reduced-motion: reduce) {
    :root { --t-fast: 1ms; --t-med: 1ms; }
  }
}