/* ─────────────────────────────────────────────────────────────
   MapFactory design tokens
   Load FIRST: fonts.css → mf-tokens.css → mf-base.css → mf-components.css → style.css
   Every value in the app should come from here. Never hard-code hex/px in pages.
   ───────────────────────────────────────────────────────────── */

:root {
  /* ── Fonts ── swap these three lines to change the whole app.
     1a (recommended) IBM Plex · 1b Barlow + JetBrains Mono · 1c Chivo */
  --font-sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-condensed: "IBM Plex Sans Condensed", var(--font-sans);
  --font-mono: "IBM Plex Mono", ui-monospace, Consolas, Menlo, monospace;
  /* figures in a grid (MFTable): Plex Sans, whose figures are all one width —
     crisper than the mono at 11px, plain noughts, narrower, and right for text */
  --font-figures: var(--font-sans);
  /* 1b: "Barlow" / "Barlow Semi Condensed" / "JetBrains Mono"
     1c: "Chivo"  / "Chivo"                  / "Chivo Mono"   */

  /* ── Type scale (13px base, dense app UI) ── */
  --fs-2xs: 10px;  /* uppercase labels, table headers */
  --fs-xs: 11px;   /* small buttons, meta, tags */
  --fs-sm: 12px;   /* controls, table cells, sidebar */
  --fs-md: 13px;   /* body (base) */
  --fs-lg: 14px;   /* panel / modal titles, nav */
  --fs-xl: 16px;   /* section headings */
  --fs-2xl: 20px;  /* page headings */
  --fs-3xl: 24px;  /* display, drop-zone title */

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  --lh-tight: 1.15;
  --lh-snug: 1.3;
  --lh-normal: 1.45;

  --tracking-tight: -0.01em;
  --tracking-normal: 0;
  --tracking-wide: 0.03em;
  --tracking-label: 0.07em;   /* for uppercase labels */

  /* ── Spacing (4px grid) ── */
  --sp-0: 0;
  --sp-px: 1px;
  --sp-half: 2px;
  --sp-1: 4px;
  --sp-1h: 6px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;

  /* ── Radius (consolidated from 3/4/5/6/8/10/12/20) ── */
  --r-sm: 4px;     /* small buttons, tags, inputs in tables */
  --r-md: 6px;     /* buttons, inputs, cards */
  --r-lg: 10px;    /* panels, modals */
  --r-pill: 999px; /* chips */

  /* ── Control sizing ── */
  --control-h-sm: 24px;
  --control-h: 30px;
  --control-h-lg: 36px;

  /* ── Motion ── */
  --dur-fast: 0.1s;
  --dur: 0.15s;
  --dur-slow: 0.25s;
  --ease: cubic-bezier(0.2, 0, 0, 1);

  /* ── Layers ── */
  --z-banner: 100;
  --z-overlay: 200;
  --z-nav: 1000;
  --z-dropdown: 1001;
  --z-popover: 11000;

  /* ── Layout ── */
  --sidebar-width: 220px;
  --nav-bar-height: 48px;   /* the bar: brand and sections */
  --subnav-height: 34px;    /* under it: the open section's pages */
  --nav-height: calc(var(--nav-bar-height) + var(--subnav-height));   /* all of the fixed header */
  --content-max: 1500px;
  --mft-max: 1200px;       /* the widest a table panel grows */

  /* ── Brand (theme-independent) ── */
  --brand-red: #c8102e;
  --brand-blue: #002d72;
  --on-accent: #ffffff;
}

/* ── Dark (default) ── */
:root,
[data-theme="dark"] {
  color-scheme: dark;
  --bg-deep: #0d0d0d;
  --bg-panel: #1a1a1a;
  --bg-surface: #242424;
  --bg-raised: #2c2c2c;
  /* the TSL pages' panels (a cool blue-grey), for pages that take their look: .tsl-shade */
  --tsl-panel: #161b22;
  --tsl-panel-2: #1c2330;
  --tsl-field: #0f141b;
  --tsl-border: #2a3340;
  --tsl-border-strong: #6e83a0;
  --text: #e8e8e8;
  --text-dim: #999999;
  --text-faint: #6e6e6e;
  --border: #333333;
  --border-strong: #555555;

  --accent: var(--brand-red);
  --accent-text: #ff5a6e;              /* red that passes contrast as text on dark */
  --accent-dim: rgba(200, 16, 46, 0.15);
  --accent-hover-bg: rgba(200, 16, 46, 0.28);
  --accent-blue: var(--brand-blue);

  --danger: #f85149;
  --danger-bg: rgba(248, 81, 73, 0.15);
  --danger-text: #ffa198;
  --warning: #e3b341;
  --warning-bg: rgba(227, 179, 65, 0.12);
  --hazard: #ffd400;        /* a warning sign: full yellow, black edge and mark, the same in both themes */
  --on-hazard: #111111;
  --success: #3fb950;
  --success-bg: rgba(63, 185, 80, 0.14);
  --info: #58a6ff;
  /* engine-braking cut levels (1–4 cylinders cut): each a clear step darker and
     redder than the last, all at least 3:1 on the panel background */
  --slot: #141414;        /* a recess cut into a panel (the graph's no-cut bars) */
  --cut-1: #f7dc6f;
  --cut-2: #f8a13c;
  --cut-3: #f0623a;
  --cut-4: #e0185f;
  --highlight: rgba(227, 179, 65, 0.45);  /* search-match marker */
  --sel-bg: rgba(255, 255, 255, 0.10);   /* selected cells: a neutral tint, lighter on dark */
  --sel-edge: #e8e8e8;                    /* a selection's outer border (the text colour) */
  /* a table's colour scale (MFTable's hill button): lowest, middle, highest,
     laid over the cell at --heat-strength — gently on dark, so its text reads */
  --heat-low: #f8696b;
  --heat-mid: #ffd966;
  --heat-high: #63be7b;
  --heat-strength: 42%;

  --series-a: #58a6ff;   /* compare: file A */
  --series-b: var(--accent);
  --series-c: #d2a8ff;   /* a third line: an edited version against the original (purple, as the curves' edited line) */
  --series-d: #39c5bb;   /* a fourth line: the original that --series-c is edited from (teal) */
  --series-e: #f778ba;   /* a fifth line (pink): the gear on the Logged data chart */

  --overlay-bg: rgba(0, 0, 0, 0.85);
  --shadow-pop: 0 4px 16px rgba(0, 0, 0, 0.4);
  --readout-bg: #ffffff;     /* a chart's readings at the cursor: solid white, dark text, in either theme */
  --readout-text: #111111;
  --readout-edge: #8a8a8a;
  --folder-back: #eaaa2c;      /* the open-files folder, as Windows 11's open folder: the same in either theme */
  --folder-front: #ffdc74;
  --folder-front-2: #f7c443;  /* (the front's shade at its foot) */
  --ch-1: #ff5a52;            /* a graph's channels, in turn (Corner Compare: the reference's lines, as i2's) */
  --ch-2: #4ad66d;
  --ch-3: #f5d547;
  --ch-4: #52c7f0;
  --ch-5: #ff9d3d;
  --ch-6: #c58cf2;
  --focus-ring: 0 0 0 2px var(--bg-deep), 0 0 0 4px var(--accent);

  --nav-bg: #1a1a1a;
  --nav-text: #e8e8e8;
  --nav-hover: rgba(255, 255, 255, 0.08);
  --dropdown-bg: var(--bg-surface);
  --subnav-bg: #2e2e2e;   /* the sub-nav, and the notch above it: light enough to see on the bar */
  --subnav-text: var(--text-dim);
  --subnav-hover-text: var(--text);
}

/* ── Light ── */
[data-theme="light"] {
  color-scheme: light;
  --bg-deep: #f0f0f0;
  --bg-panel: #ffffff;
  --bg-surface: #f5f5f5;
  --bg-raised: #ebebeb;
  --tsl-panel: #ffffff;
  --tsl-panel-2: #eef1f4;
  --tsl-field: #f6f8fa;
  --tsl-border: #d8dce1;
  --tsl-border-strong: #b4bdc9;
  --text: #1a1a1a;
  --text-dim: #555555;
  --text-faint: #8a8a8a;
  --border: #dddddd;
  --border-strong: #bbbbbb;

  --accent: var(--brand-red);
  --accent-text: var(--brand-red);
  --accent-dim: rgba(200, 16, 46, 0.1);
  --accent-hover-bg: rgba(200, 16, 46, 0.2);
  --accent-blue: var(--brand-blue);

  --danger: #cf222e;
  --danger-bg: rgba(207, 34, 46, 0.1);
  --danger-text: #a40e26;
  --warning: #9a6700;
  --warning-bg: rgba(212, 167, 44, 0.16);
  --hazard: #ffd400;
  --on-hazard: #111111;
  --success: #1a7f37;
  --success-bg: rgba(26, 127, 55, 0.1);
  --info: #0969da;
  --slot: #dadada;
  --cut-1: #a07800;
  --cut-2: #c04a00;
  --cut-3: #a80f2a;
  --cut-4: #580a2e;
  --highlight: rgba(227, 179, 65, 0.4);
  --sel-bg: rgba(0, 0, 0, 0.07);
  --sel-edge: #1a1a1a;
  --heat-low: #f8696b;
  --heat-mid: #ffeb84;
  --heat-high: #63be7b;
  --heat-strength: 100%;

  --series-a: #0969da;
  --series-b: var(--accent);
  --series-c: #8250df;
  --series-d: #0a7c74;
  --series-e: #bf3989;

  --overlay-bg: rgba(0, 0, 0, 0.7);
  --shadow-pop: 0 4px 16px rgba(0, 0, 0, 0.15);
  --readout-bg: #ffffff;
  --readout-text: #111111;
  --readout-edge: #8a8a8a;
  --folder-back: #eaaa2c;
  --folder-front: #ffdc74;
  --folder-front-2: #f7c443;
  --ch-1: #d42a20;
  --ch-2: #1f8a3c;
  --ch-3: #a37b00;
  --ch-4: #0b84b3;
  --ch-5: #d4620a;
  --ch-6: #7b3fc4;
  --focus-ring: 0 0 0 2px var(--bg-panel), 0 0 0 4px var(--accent);

  --nav-bg: var(--brand-red);
  --nav-text: #ffffff;
  --nav-hover: rgba(255, 255, 255, 0.15);
  --dropdown-bg: #ffffff;
  --subnav-bg: #ffffff;
  --subnav-text: var(--text-dim);
  --subnav-hover-text: var(--text);
}

/* ── Legacy aliases: vars pages already reference but were never defined ── */
:root {
  --bg: var(--bg-deep);
  --text-muted: var(--text-dim);
  --muted: var(--text-dim);
}

/* ── Added during the Phase 2 migration. Theme-independent. ── */
:root {
  --fs-3xs: 9px;    /* compare: struck-through old value under a cell */
  --fs-4xl: 32px;   /* drop-zone icon (small) */
  --fs-5xl: 48px;   /* drop-zone icon (main) */

  /* Track-map canvas: the maps are drawn for a yellow ground in both themes */
  --map-bg: #ffcc00;
  --on-map: #7a5c00;

  /* Split-count chips (layout editor): categorical, so they stay fixed per count */
  --split-0: #4b535e;
  --split-1: #8b949e;
  --split-2: #79c0ff;
  --split-3: #56d364;
  --split-4: #e3b341;
  --split-5: #d2a8ff;
  --on-split: #0b0e14;

  /* Modal dialogs (lighter than --overlay-bg, which covers the drop zone) */
  --backdrop: rgba(0, 0, 0, 0.5);
  --shadow-modal: 0 12px 40px rgba(0, 0, 0, 0.4);
}