/*
 * paper.aero UI v2 — design tokens (THE styling foundation; no Tailwind).
 *
 * Two tiers (DESIGN_FOUNDATION §5, small-team variant):
 *   primitive  --pa-*   geometry / type scale (NEW — 8pt grid)
 *   semantic   --color-* colour intents (REUSED — values match
 *              static/css/input.css so v1 and v2 render the same palette;
 *              redeclared here so the workbench stands alone)
 *
 * Custom properties pierce Lit shadow DOM — every pa-* widget consumes
 * these and never hardcodes a colour, size, or radius.
 *
 * Validated by test/tokens.test.ts:
 *   - WCAG 1.4.3 text contrast ≥ 4.5:1 (body) / ≥ 3:1 (large + UI, 1.4.11)
 *   - touch targets ≥ 44px (HIG default / WCAG 2.5.5 AAA)
 *   - geometry on the 8pt grid (4px half-step allowed)
 */

:root {
  /* Native controls (range tracks, number spinners, select arrows, scroll
     bars) follow the theme, not the system: dark sets this to dark (#2136). */
  color-scheme: light;

  /* ---- geometry primitives (8pt grid, 4px half-step) ---- */
  --pa-space-1: 4px;
  --pa-space-2: 8px;
  --pa-space-3: 16px;
  --pa-space-4: 24px;
  --pa-space-5: 32px;
  --pa-space-6: 48px;

  --pa-radius-1: 4px;
  --pa-radius-2: 8px;
  --pa-radius-3: 16px;
  --pa-radius-full: 999px;

  /* Touch: 44px = HIG default / WCAG 2.5.5 AAA. Control = visible size;
     target = hit area (may exceed the visible element). */
  --pa-size-touch: 44px;
  --pa-size-control: 32px;
  --pa-size-icon: 24px;

  /* iPhone safe areas (#1522): templates ship viewport-fit=cover, so chrome
     keeps out of the notch / home-indicator zones itself. Zero everywhere
     else. One definition for the shell and the server pages alike. */
  --pa-safe-top: env(safe-area-inset-top, 0px);
  --pa-safe-right: env(safe-area-inset-right, 0px);
  --pa-safe-bottom: env(safe-area-inset-bottom, 0px);
  --pa-safe-left: env(safe-area-inset-left, 0px);

  /* ---- type scale (separate modular-ish scale, not the spacing grid) ---- */
  /* B612 and B612 Mono only, with no fallback family, ever (#2054; Gareth,
     2026-10-17, #2074): they ARE paper.aero's type. The faces load with
     font-display: block and are preloaded and service-worker cached, so text
     waits for B612 instead of flashing another font.
     test/no-fallback-fonts.test.ts fails if either token gains a fallback.
     Only 400 and 700 are loaded (B612 Mono: 400 only), so weights are
     written as 400 or 700, never a value that silently rounds to one. */
  --pa-font-body: "B612";
  --pa-font-mono: "B612 Mono";
  --pa-text-caption: 12px;
  --pa-text-body: 16px;
  --pa-text-title: 20px;
  --pa-text-display: 25px;

  /* ---- layers (z-index), low to high: the redesign's region order (#2118,
     the approved mockups' Tokens board). The order is the contract, not the
     numbers. Native <dialog>.showModal() (date picker, unsaved prompt) paints
     in the browser's top layer, above all of these. ---- */
  --pa-layer-raised: 1;          /* within a component: sticky heads, a panel over its own row */
  --pa-layer-raised-2: 2;        /* within a component: one step above raised */
  --pa-layer-raised-3: 3;        /* within a component: the vertical-profile band probe */
  --pa-layer-map-overlay: 10;    /* map-native: route editing, directly over the map */
  --pa-layer-radial: 10;         /* map-native: the long-press radial menu */
  --pa-layer-over-radial: 11;    /* the tapped airfield's weather card, readable over the ring */
  --pa-layer-rail: 20;           /* tool rail and bottom dock */
  --pa-layer-panel: 30;          /* the panel slot */
  --pa-layer-panel-over: 31;     /* a panel opened from a panel (Compare over Airfield) */
  --pa-layer-chrome: 40;         /* top bar */
  --pa-layer-route-bar: 40;      /* the route field, inside the top bar */
  --pa-layer-banner: 40;         /* status strip */
  --pa-layer-popup: 50;          /* popovers and autocomplete lists */
  --pa-layer-scrim: 60;
  --pa-layer-menu: 61;           /* dialog layer: the menu drawer over its scrim */
  --pa-layer-toast: 70;          /* action note */
  --pa-layer-alert: 80;          /* chunk-load errors */
  --pa-layer-system: 9999;       /* fatal-error bar, debug panel, brightness dim */

  /* ---- elevation (today's recipes; the redesign will collapse them) ---- */
  --pa-shadow-1: 0 1px 3px rgb(0 0 0 / 0.2);          /* route bar, AIRAC badge */
  --pa-shadow-1-heavy: 0 1px 3px rgb(0 0 0 / 0.3);    /* weather strip */
  --pa-shadow-2: 0 4px 16px rgb(0 0 0 / 0.25);        /* popovers */
  --pa-shadow-3: 0 8px 32px rgb(0 0 0 / 0.35);        /* menu drawer */
  --pa-shadow-4: 0 12px 40px rgb(0 0 0 / 0.35);       /* dialogs */
  --pa-shadow-radial: drop-shadow(0 4px 12px rgb(0 0 0 / 0.35)) drop-shadow(0 1px 3px rgb(0 0 0 / 0.3));

  /* ---- motion durations ---- */
  --pa-duration-fast: 150ms;      /* hover fill, chevron turn */
  --pa-duration-enter: 200ms;     /* radial segment in */
  --pa-duration-bloom: 250ms;     /* radial menu opening */
  --pa-duration-pulse: 1.2s;      /* loading skeletons */
  --pa-duration-pulse-slow: 2s;   /* recording dot */

  /* ---- redesign tokens (#2114): the approved mockups' Tokens board ----
     The colour roles every redesigned part uses. Map paint (airfield dots,
     airspace, route line) stays in the theme engine; these are for the
     controls around the map. test/tokens.test.ts checks every text and edge
     pair below at WCAG AA in both themes. */
  --pa-color-app: #f1f5f9;            /* behind panels */
  --pa-color-surface: #ffffff;        /* top bar, dock, panels */
  --pa-color-surface-2: #f8fafc;      /* tiles, hover, table head */
  --pa-color-border: #e2e8f0;         /* dividers */
  --pa-color-border-strong: #cbd5e1;  /* chart lines */
  --pa-color-border-control: #8392a6; /* input and button edges (3:1) */
  --pa-color-text: #0f172a;
  --pa-color-text-2: #475569;         /* secondary text, labels */
  --pa-color-muted: #64748b;          /* placeholders, captions */
  /* One fill for selected and primary: ink (Decision 1). Orange is kept for
     focus, the current-time marker and the default route line. */
  --pa-color-primary: #0f172a;
  --pa-color-on-primary: #ffffff;
  --pa-color-primary-hover: #1e293b;
  --pa-color-accent: #b45309;
  /* Status as text on a surface, then each status's badge fill and text
     (Decision 2: word, dot and tint, readable in both themes). */
  --pa-color-good: #15803d;
  --pa-color-marginal: #a16207;
  --pa-color-poor: #b91c1c;
  --pa-color-info: #1d4ed8;
  --pa-color-lifr: #a21caf;
  --pa-color-nodata: #64748b;
  --pa-color-good-bg: #dcfce7;
  --pa-color-good-fg: #166534;
  --pa-color-marginal-bg: #fef3c7;
  --pa-color-marginal-fg: #854d0e;
  --pa-color-poor-bg: #fee2e2;
  --pa-color-poor-fg: #991b1b;
  --pa-color-info-bg: #dbeafe;
  --pa-color-info-fg: #1e40af;
  --pa-color-lifr-bg: #fae8ff;
  --pa-color-lifr-fg: #86198f;
  --pa-color-nodata-bg: #f1f5f9;
  --pa-color-nodata-fg: #475569;
  --pa-color-scrim: rgb(15 23 42 / 0.45);

  /* Elevation: e1 controls on the map, e2 panels / popovers / sheets,
     e3 dialogs. */
  --pa-elev-1: 0 1px 2px rgb(15 23 42 / 0.1), 0 2px 6px rgb(15 23 42 / 0.08);
  --pa-elev-2: 0 8px 24px rgb(15 23 42 / 0.16);
  --pa-elev-3: 0 16px 48px rgb(15 23 42 / 0.28);
  /* State rings (#2122): an open control's ink bar, and a field's focus and
     invalid edge, drawn as shadows so they never change the box size. */
  --pa-shadow-open: inset 0 -3px 0 var(--pa-color-primary);
  --pa-shadow-field-focus: 0 0 0 1px var(--pa-color-accent);
  --pa-shadow-field-invalid: 0 0 0 1px var(--pa-color-poor);

  /* Eight type roles: size / line height / weight. Weights are 400 or 700
     only; B612 Mono is for text copied to or from a machine and for measured
     values whose digits must line up, never bold. */
  --pa-text-small: 14px;
  --pa-leading-display: 1.2;
  --pa-leading-title: 1.25;
  --pa-leading-head: 1.3;
  --pa-leading-body: 1.45;
  --pa-leading-small: 1.4;
  --pa-leading-label: 1.3;
  --pa-leading-caption: 1.35;
  --pa-leading-data: 1.35;
  --pa-tracking-label: 0.06em;
  --pa-type-display: 700 var(--pa-text-display) / var(--pa-leading-display) var(--pa-font-body);
  --pa-type-title: 700 var(--pa-text-title) / var(--pa-leading-title) var(--pa-font-body);
  --pa-type-head: 700 var(--pa-text-body) / var(--pa-leading-head) var(--pa-font-body);
  --pa-type-body: 400 var(--pa-text-body) / var(--pa-leading-body) var(--pa-font-body);
  --pa-type-small: 400 var(--pa-text-small) / var(--pa-leading-small) var(--pa-font-body);
  --pa-type-label: 700 var(--pa-text-caption) / var(--pa-leading-label) var(--pa-font-body);
  --pa-type-caption: 400 var(--pa-text-caption) / var(--pa-leading-caption) var(--pa-font-body);
  --pa-type-data: 400 var(--pa-text-small) / var(--pa-leading-data) var(--pa-font-mono);

  /* 12 px: list-row and tile padding (between --pa-space-2 and -3). */
  --pa-space-row: 12px;

  /* Motion: presses and panels, one curve. Zeroed under reduced motion. */
  --pa-duration-press: 120ms;
  --pa-duration-panel: 200ms;
  --pa-ease: cubic-bezier(0.2, 0, 0, 1);

  /* ---- semantic colours — LIGHT (values = static/css/input.css :root) ---- */
  /* Legacy names (#2114): the neutrals now follow the redesign roles, so
     every v2 surface and the dark theme pick them up before each section's
     cutover. The accent and status legacy names below keep their old values
     until the cutovers replace their uses; all legacy names go in item 8. */
  --color-bg-primary: var(--pa-color-surface);
  --color-bg-secondary: var(--pa-color-surface-2);
  --color-bg-elevated: var(--pa-color-surface);
  --color-bg-card: var(--pa-color-surface);

  --color-accent: #d97706;
  --color-accent-light: #f59e0b;
  --color-accent-dark: #b45309;
  /* Selected-control fill + its text: the one accent pair guaranteed to
     carry SMALL text at 4.5:1 in both themes (plain accent + white fails
     in light mode). Widgets use this for active pills/chips. */
  --color-accent-strong: #b45309;
  --color-on-accent: #ffffff;

  --color-text-primary: var(--pa-color-text);
  --color-text-secondary: var(--pa-color-text-2);
  --color-text-muted: var(--pa-color-muted);

  --color-border: var(--pa-color-border);
  --color-border-strong: var(--pa-color-border-strong);

  /* Flight categories (shared with v1; the one aviation colour code) */
  --color-vfr: #22c55e;
  --color-mvfr: #3b82f6;
  --color-ifr: #ef4444;
  --color-lifr: #ec4899;
  --color-nodata: #94a3b8;

  /* The legacy status names follow the redesign status roles (#2136), so
     the widgets not yet cut over get the dark values and AA text contrast. */
  --color-success: var(--pa-color-good);
  --color-warning: var(--pa-color-marginal);
  --color-danger: var(--pa-color-poor);
  --color-info: var(--pa-color-info);
}

/* ---- DARK: a real night look, not a dimmed day one ---- */
:root.dark {
  color-scheme: dark;
  --pa-color-app: #0b1220;
  --pa-color-surface: #111a2b;
  --pa-color-surface-2: #18233a;
  --pa-color-border: #263449;
  --pa-color-border-strong: #33435c;
  --pa-color-border-control: #5b6b84;
  --pa-color-text: #e6edf5;
  --pa-color-text-2: #a3b1c6;
  --pa-color-muted: #8796ad;
  --pa-color-primary: #e6edf5;
  --pa-color-on-primary: #0b1220;
  --pa-color-primary-hover: #cbd5e1;
  /* Orange, kept apart from the MARGINAL yellow. */
  --pa-color-accent: #fb923c;
  --pa-color-good: #4ade80;
  --pa-color-marginal: #facc15;
  --pa-color-poor: #f87171;
  --pa-color-info: #60a5fa;
  --pa-color-lifr: #e879f9;
  --pa-color-nodata: #8796ad;
  --pa-color-good-bg: #0f2e1d;
  --pa-color-good-fg: #86efac;
  --pa-color-marginal-bg: #33280a;
  --pa-color-marginal-fg: #fde68a;
  --pa-color-poor-bg: #3b1517;
  --pa-color-poor-fg: #fca5a5;
  --pa-color-info-bg: #132a4d;
  --pa-color-info-fg: #93c5fd;
  --pa-color-lifr-bg: #35143d;
  --pa-color-lifr-fg: #f0abfc;
  --pa-color-nodata-bg: #1c2638;
  --pa-color-nodata-fg: #cbd5e1;
  --pa-color-scrim: rgb(0 0 0 / 0.55);
  --pa-elev-1: 0 1px 2px rgb(0 0 0 / 0.5), 0 2px 6px rgb(0 0 0 / 0.4);
  --pa-elev-2: 0 8px 24px rgb(0 0 0 / 0.5);
  --pa-elev-3: 0 16px 48px rgb(0 0 0 / 0.6);

  /* Legacy accent names, old values until the cutovers. */
  --color-accent: #f59e0b;
  --color-accent-light: #fbbf24;
  --color-accent-dark: #d97706;
  --color-accent-strong: #fbbf24;
  --color-on-accent: #0c1929;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --pa-duration-press: 0ms;
    --pa-duration-panel: 0ms;
  }
}