/* =====================================================================
   Design tokens — Direction A "לוח הכרטיסים" (the physical card board).
   Two designed themes:  "cabinet steel" (light)  /  "night armory" (dark).
   Dark follows prefers-color-scheme unless <html data-theme="light|dark"> overrides it.

   Rules
   * Fuel colours mark fuel type only (diesel = graphite body + amber band, petrol = green body + mint band).
   * Status colours mark status only (ok = olive, warn = amber, bad = signal orange).
   * The second block ("legacy aliases") keeps every token name the 12 other screens already use.
   ===================================================================== */
:root {
  /* ---- type */
  --font-display: 'Karantina', 'IBM Plex Sans Hebrew', sans-serif;
  --font-sans: 'IBM Plex Sans Hebrew', 'Heebo', 'Segoe UI', system-ui, Arial, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;
  --fs-display: 88px;
  --fs-h1: 34px;   /* Karantina */
  --fs-h2: 20px;   /* Plex — used by screens for section titles; global h2 uses --fs-h2-display */
  --fs-h2-display: 27px;
  --fs-body: 14.5px;
  --fs-small: 13px;
  --fs-caption: 12px;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* ---- spacing: 4/8 grid */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;

  /* ---- shape */
  --radius-card: 10px;
  --radius-ctl: 8px;
  --radius-tag: 5px;
  --radius-pill: 999px;
  --radius-sheet: 16px;

  /* ---- layout */
  --topbar-h: 58px;
  --navstrip-h: 42px;
  --tabbar-h: 66px;
  --content-max: 1440px;
  --touch-min: 44px;
  --cw: 76px;            /* hanging card width / height on the board */
  --ch: 120px;

  /* ---- motion */
  --spring: cubic-bezier(.34, 1.45, .64, 1);
  --ease: cubic-bezier(.2, .7, .2, 1);

  /* ---- fixed material colours (same in both themes: they are plastic, not UI) */
  --amber: #F2A900;
  --amber-2: #FFC233;
  --amber-ink: #271B00;
  --card-d-top: #363C40;
  --card-d-bot: #202427;
  --card-p-top: #19B07E;
  --card-p-bot: #0C7752;
  --mint: #CDEFDD;

  /* ================= cabinet steel (light) ================= */
  --bg: #E4E7E1;
  --board: #D5DAD2;
  --board-edge: #BFC6BD;
  --hole: rgba(38, 46, 40, .19);
  --plate: #F6F7F3;
  --plate-2: #EDEFE9;
  --plate-3: #E3E6DF;
  --plate-hi: rgba(255, 255, 255, .9);
  --screw: #B5BCB4;
  --ink: #171C19;
  --ink-2: #4A534C;
  --ink-3: #6F7870;
  --line: rgba(23, 28, 25, .11);
  --line-2: rgba(23, 28, 25, .2);

  --head: #1A1F1C;
  --head-2: #262C28;
  --head-3: #313833;
  --head-ink: #ECEFE8;
  --head-ink-2: #99A39B;

  --amber-text: #8F5E00;
  --amber-bg: rgba(242, 169, 0, .17);
  --petrol-text: #0B6B4A;
  --diesel-text: #2E3437;

  --signal: #CF4510;
  --signal-2: #E8591F;
  --signal-bg: #F8E6DB;
  --signal-ink: #7E2804;
  --ok-c: #3D5A22;
  --ok-bg: #E3EAD6;

  --pouch: #6A7350;
  --pouch-2: #5E6746;

  --shadow-plate: 0 1px 0 var(--plate-hi) inset, 0 1px 2px rgba(20, 25, 20, .08), 0 0 0 1px var(--line);
  --shadow-card: 0 1px 1px rgba(0, 0, 0, .2), 0 4px 7px -1px rgba(20, 25, 20, .22);
  --shadow-lift: 0 14px 22px -4px rgba(20, 25, 20, .32), 0 4px 6px rgba(0, 0, 0, .14);
  --shadow-pop: 0 18px 40px -8px rgba(15, 20, 16, .35), 0 0 0 1px var(--line);
  --focus: #F2A900;
  --focus-ink: #171C19;
  --scrim: rgba(18, 22, 19, .42);
  color-scheme: light;
}
@supports (animation-timing-function: linear(0, 1)) {
  :root {
    --spring: linear(0, 0.009, 0.035 2.1%, 0.141, 0.281 6.7%, 0.723 12.9%, 0.938 16.7%, 1.017, 1.077, 1.121, 1.149 24.3%, 1.159, 1.163, 1.161, 1.154 29.9%, 1.129 32.8%, 1.051 39.6%, 1.017 43.1%, 0.991, 0.977 51%, 0.974 53.8%, 0.975 57.1%, 0.997 69.8%, 1.003 76.9%, 1.004 83.8%, 1);
  }
}

/* ================= night armory (dark) — designed, not inverted ================= */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0F1211; --board: #141817; --board-edge: #262C29; --hole: rgba(0, 0, 0, .6);
    --plate: #1B201E; --plate-2: #212724; --plate-3: #272E2B; --plate-hi: rgba(255, 255, 255, .045); --screw: #39413C;
    --ink: #E6E9E3; --ink-2: #A6AEA7; --ink-3: #848E86; --line: rgba(230, 233, 227, .085); --line-2: rgba(230, 233, 227, .16);
    --head: #0A0D0C; --head-2: #161A18; --head-3: #1F2421; --head-ink: #E6E9E3; --head-ink-2: #838D85;
    --amber-text: #F5BC3A; --amber-bg: rgba(242, 169, 0, .13); --petrol-text: #4FD3A2; --diesel-text: #C3CACE;
    --signal: #FF6A2A; --signal-2: #FF8248; --signal-bg: rgba(255, 106, 42, .12); --signal-ink: #FFB089;
    --ok-c: #AFD07F; --ok-bg: rgba(175, 208, 127, .1);
    --pouch: #3B4230; --pouch-2: #333A29;
    --shadow-plate: 0 1px 0 var(--plate-hi) inset, 0 1px 2px rgba(0, 0, 0, .4), 0 0 0 1px var(--line);
    --shadow-card: 0 1px 1px rgba(0, 0, 0, .55), 0 5px 9px -1px rgba(0, 0, 0, .6);
    --shadow-lift: 0 16px 26px -4px rgba(0, 0, 0, .75), 0 4px 7px rgba(0, 0, 0, .5);
    --shadow-pop: 0 22px 48px -8px rgba(0, 0, 0, .7), 0 0 0 1px var(--line-2);
    --scrim: rgba(0, 0, 0, .6);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0F1211; --board: #141817; --board-edge: #262C29; --hole: rgba(0, 0, 0, .6);
  --plate: #1B201E; --plate-2: #212724; --plate-3: #272E2B; --plate-hi: rgba(255, 255, 255, .045); --screw: #39413C;
  --ink: #E6E9E3; --ink-2: #A6AEA7; --ink-3: #848E86; --line: rgba(230, 233, 227, .085); --line-2: rgba(230, 233, 227, .16);
  --head: #0A0D0C; --head-2: #161A18; --head-3: #1F2421; --head-ink: #E6E9E3; --head-ink-2: #838D85;
  --amber-text: #F5BC3A; --amber-bg: rgba(242, 169, 0, .13); --petrol-text: #4FD3A2; --diesel-text: #C3CACE;
  --signal: #FF6A2A; --signal-2: #FF8248; --signal-bg: rgba(255, 106, 42, .12); --signal-ink: #FFB089;
  --ok-c: #AFD07F; --ok-bg: rgba(175, 208, 127, .1);
  --pouch: #3B4230; --pouch-2: #333A29;
  --shadow-plate: 0 1px 0 var(--plate-hi) inset, 0 1px 2px rgba(0, 0, 0, .4), 0 0 0 1px var(--line);
  --shadow-card: 0 1px 1px rgba(0, 0, 0, .55), 0 5px 9px -1px rgba(0, 0, 0, .6);
  --shadow-lift: 0 16px 26px -4px rgba(0, 0, 0, .75), 0 4px 7px rgba(0, 0, 0, .5);
  --shadow-pop: 0 22px 48px -8px rgba(0, 0, 0, .7), 0 0 0 1px var(--line-2);
  --scrim: rgba(0, 0, 0, .6);
  color-scheme: dark;
}

/* =====================================================================
   Legacy aliases — the names every existing screen stylesheet uses.
   They resolve through the A tokens above, so both themes follow automatically.
   ===================================================================== */
:root {
  --canvas: var(--bg);
  --surface: var(--plate);
  --border: var(--line-2);
  --fill-subtle: var(--plate-2);
  /* "on dark" = text on an --ink fill; --ink flips in dark mode, so this follows the plate */
  --ink-on-dark: var(--plate);
  --ink-on-dark-2: color-mix(in srgb, var(--plate) 68%, var(--ink));
  --chrome-hover: var(--head-2);
  --accent: var(--amber);

  --diesel: var(--diesel-text);
  --diesel-tint: color-mix(in srgb, var(--card-d-top) 13%, var(--plate));
  --petrol: var(--petrol-text);
  --petrol-tint: color-mix(in srgb, var(--card-p-top) 15%, var(--plate));

  --ok: var(--ok-c);
  --ok-tint: var(--ok-bg);
  --warn: #C98A00;
  --warn-tint: var(--amber-bg);
  --warn-ink: var(--amber-text);
  --bad: var(--signal);
  --bad-tint: var(--signal-bg);
  --neutral: var(--ink-3);
  --neutral-tint: var(--plate-2);

  --shadow-1: var(--shadow-plate);
  --shadow-2: var(--shadow-pop);
  --focus-ring: 0 0 0 2.5px var(--focus);
  --sidebar-w: 0px;
}