/* 00-tokens.css — colour, type, spacing, status palette, light/dark
 *
 * The neutral ramp is blue-shifted slate rather than true grey: a warm or
 * neutral grey adjacent to amber makes amber read as dirty white at small
 * sizes, and a cool ground separates all four status hues cleanly. The dark
 * ground is a desaturated navy-black rather than #000, because pure black
 * beside bright text produces halation that smears 11px legends.
 *
 * No @font-face: a font fetch is blocked in some engines under file://.
 */

:root {
  /* ---- neutral ramp (light) ---- */
  --bg-app: #EEF1F5;
  --bg-surface: #FFFFFF;
  --bg-surface-2: #F5F7FA;
  --bg-surface-3: #E7ECF2;
  --bg-closed: #D8DEE6;

  --tx-strong: #0F172A;
  --tx-body: #1E293B;
  --tx-muted: #475569;
  --tx-faint: #64748B;   /* >=13px only */

  --ln-hair: #E2E8F0;    /* decorative */
  --ln-base: #CBD5E1;    /* non-interactive card edges */
  --ln-control: #7E8FA3; /* any edge that bounds a control — clears 3:1 */
  --ln-strong: #64748B;  /* axis ticks, now-line, emphasised dividers */
  --ln-ink: #0F172A;     /* ink actions, "mine" cap */

  --focus: #0E7490;      /* focus ring and text selection — reserved */

  /* ---- status palette ---- */
  --st-created-line: #1D4ED8;
  --st-created-fill: transparent;      /* hollow */
  --st-created-text: #1E3A8A;
  --st-created-chip: #DBEAFE;

  --st-approved-line: #15803D;
  --st-approved-fill: #DCFCE7;
  --st-approved-text: #14532D;
  --st-approved-chip: #DCFCE7;

  --st-best-line: #B45309;
  --st-best-fill: #FEF3C7;
  --st-best-text: #78350F;
  --st-best-chip: #FEF3C7;

  --st-refused-line: #B91C1C;
  --st-refused-fill: #FEE2E2;
  --st-refused-text: #7F1D1D;
  --st-refused-chip: #FEE2E2;

  /* aerodrome identity — used for the switcher marker only, never for status */
  --ad-ebaw: #0F766E;
  --ad-eblg: #4338CA;
  --ad-ebos: #0E7490;
  --ad-ebci: #7C2D12;

  /* ---- type ---- */
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
    Arial, "Noto Sans", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
    "Liberation Mono", "Courier New", monospace;

  --fs-050: 0.6875rem;   /* 11px */
  --fs-100: 0.75rem;     /* 12px */
  --fs-200: 0.8125rem;   /* 13px */
  --fs-300: 0.875rem;    /* 14px — base */
  --fs-400: 1rem;
  --fs-500: 1.25rem;
  --fs-600: 1.5rem;

  --lh-tight: 1.2;
  --lh-body: 1.45;

  /* ---- spacing ---- */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;

  --radius: 3px;
  --radius-lg: 6px;

  /* ---- board geometry (density-driven) ---- */
  --lane-h: 26px;        /* never below the 24px target floor, in either mode */
  --lane-gap: 4px;
  --row-pad: 16px;
  --gutter-w: 112px;
  --shoulder-w: 64px;

  --shadow-1: 0 1px 2px rgba(15, 23, 42, 0.08);
  --shadow-2: 0 6px 24px rgba(15, 23, 42, 0.18);
}

:root[data-density="compact"] {
  --lane-gap: 2px;
  --row-pad: 8px;
}

@media (max-width: 1180px) {
  :root { --gutter-w: 88px; }
}

/* ---- dark ---- */
:root[data-theme="dark"] {
  --bg-app: #070A0E;
  --bg-surface: #0B0F14;
  --bg-surface-2: #121822;
  --bg-surface-3: #1A2230;
  --bg-closed: #10161F;

  --tx-strong: #E6EDF3;
  --tx-body: #D3DCE6;
  --tx-muted: #9AA7B4;
  --tx-faint: #74838F;

  --ln-hair: #1B2431;
  --ln-base: #2C3846;
  --ln-control: #5A6B7D;
  --ln-strong: #7A8CA0;
  --ln-ink: #E6EDF3;

  --focus: #22D3EE;

  --st-created-line: #5B8DE8;
  --st-created-fill: #101C2E;
  --st-created-text: #9DC1FF;
  --st-created-chip: #101C2E;

  --st-approved-line: #2F9E5F;
  --st-approved-fill: #0E2A1B;
  --st-approved-text: #7EE2A8;
  --st-approved-chip: #0E2A1B;

  --st-best-line: #C98A1E;
  --st-best-fill: #2A1F0A;
  --st-best-text: #FFCE6E;
  --st-best-chip: #2A1F0A;

  --st-refused-line: #D9534F;
  --st-refused-fill: #2A1214;
  --st-refused-text: #FF9B9B;
  --st-refused-chip: #2A1214;

  --ad-ebaw: #2DD4BF;
  --ad-eblg: #A5B4FC;
  --ad-ebos: #67E8F9;
  --ad-ebci: #FDBA74;

  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.6);
  --shadow-2: 0 8px 28px rgba(0, 0, 0, 0.7);
}

@media (prefers-color-scheme: dark) {
  :root[data-theme="auto"] {
    --bg-app: #070A0E;
    --bg-surface: #0B0F14;
    --bg-surface-2: #121822;
    --bg-surface-3: #1A2230;
    --bg-closed: #10161F;

    --tx-strong: #E6EDF3;
    --tx-body: #D3DCE6;
    --tx-muted: #9AA7B4;
    --tx-faint: #74838F;

    --ln-hair: #1B2431;
    --ln-base: #2C3846;
    --ln-control: #5A6B7D;
    --ln-strong: #7A8CA0;
    --ln-ink: #E6EDF3;

    --focus: #22D3EE;

    --st-created-line: #5B8DE8;
    --st-created-fill: #101C2E;
    --st-created-text: #9DC1FF;
    --st-created-chip: #101C2E;

    --st-approved-line: #2F9E5F;
    --st-approved-fill: #0E2A1B;
    --st-approved-text: #7EE2A8;
    --st-approved-chip: #0E2A1B;

    --st-best-line: #C98A1E;
    --st-best-fill: #2A1F0A;
    --st-best-text: #FFCE6E;
    --st-best-chip: #2A1F0A;

    --st-refused-line: #D9534F;
    --st-refused-fill: #2A1214;
    --st-refused-text: #FF9B9B;
    --st-refused-chip: #2A1214;

    --ad-ebaw: #2DD4BF;
    --ad-eblg: #A5B4FC;
    --ad-ebos: #67E8F9;
    --ad-ebci: #FDBA74;

    --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.6);
    --shadow-2: 0 8px 28px rgba(0, 0, 0, 0.7);
  }
}