/* ============================================================================
   FreightDeck theme tokens — THE SINGLE SOURCE OF TRUTH FOR COLOR.
   To re-theme the entire app: edit the values below. Light = :root,
   dark = :root[data-theme="dark"]. No rebuild, no re-derive needed for color.
   Loaded first (before styles.css) so every var() resolves.
   ============================================================================ */
:root {
  /* surfaces */
  --fd-bg: #f4f1ea;          /* page background */
  --fd-panel: #fffdf8;       /* cards / panels */
  --fd-panel2: #f7f4ec;      /* inputs / inset */
  --fd-bg2: #edeae2;         /* secondary bg / nav */
  --fd-surf-3: #efece4;
  --fd-surf-4: #efebe0;
  --fd-surf-5: #fbf8f1;
  --fd-surf-6: #e3ddd0;
  --fd-surf-7: #e6ecf3;
  --fd-surf-8: #e9eef4;
  --fd-surf-9: #d8dee6;
  --fd-surf-10: #f0f0f5;
  /* semantic tints (chip backgrounds) */
  --fd-tint-good: #d9ead9;
  --fd-tint-warn: #f0e2c4;
  --fd-tint-bad: #f2d5d5;
  --fd-tint-warn2: #f2e3d5;
  --fd-tint-warn3: #f7f0dc;
  /* borders */
  --fd-border: #d8d2c4;
  --fd-border2: #c9c2b2;
  /* text */
  --fd-ink: #16202b;         /* primary text — nudged darker (was #1c2733) */
  --fd-ink2: #232f3b;        /* strong secondary (was #2a3744) */
  --fd-muted2: #333d47;      /* darker (was #45525f) */
  --fd-muted: #47525d;       /* muted text — darker for more presence (was #5b6875) */
  --fd-dim: #667079;         /* dim text — darker (was #8a94a0) */
  /* accent + semantic solids */
  --fd-accent: #2f5d8f;
  --fd-accent2: #264b74;
  --fd-purple: #6d28d9;
  --fd-good: #15803d;
  --fd-warn: #b45309;
  --fd-bad: #b91c1c;
  /* rgba channels (for translucent uses) */
  --fd-panel-rgb: 255,253,248;
  --fd-bg-rgb: 244,241,234;
  --fd-panel2-rgb: 247,244,236;
  --fd-bg2-rgb: 237,234,226;
  --fd-surf5-rgb: 251,248,241;
  --fd-surf7-rgb: 230,236,243;
  --fd-surf9-rgb: 216,222,230;
  --fd-accent-rgb: 47,93,143;
  --fd-muted-rgb: 91,104,117;
  --fd-border-rgb: 216,210,196;
  --fd-border2-rgb: 201,194,178;
  --fd-wash-rgb: 28,39,51;     /* ink wash — low-alpha tints */
  --fd-overlay-rgb: 28,39,51;  /* ink overlay — high-alpha backdrops */
}
:root[data-theme="dark"] {
  --fd-bg: #0f172a;
  --fd-panel: #1e293b;
  --fd-panel2: #182334;
  --fd-bg2: #263349;
  --fd-surf-3: #111a2b;
  --fd-surf-4: #1a2434;
  --fd-surf-5: #131c2c;
  --fd-surf-6: #2a3648;
  --fd-surf-7: #1d2b42;
  --fd-surf-8: #1d2b42;
  --fd-surf-9: #33415a;
  --fd-surf-10: #1a2334;
  --fd-tint-good: #16321f;
  --fd-tint-warn: #3a2d12;
  --fd-tint-bad: #3a191c;
  --fd-tint-warn2: #362513;
  --fd-tint-warn3: #302a16;
  --fd-border: #35415a;
  --fd-border2: #43506b;
  --fd-ink: #e8edf4;
  --fd-ink2: #cbd5e1;
  --fd-muted2: #b6c2d0;
  --fd-muted: #94a3b8;
  --fd-dim: #778699;
  --fd-accent: #4a9eff;
  --fd-accent2: #77aef0;
  --fd-purple: #c4b5fd;
  --fd-good: #4ade80;
  --fd-warn: #fbbf24;
  --fd-bad: #f87171;
  --fd-panel-rgb: 30,41,59;
  --fd-bg-rgb: 15,23,42;
  --fd-panel2-rgb: 24,35,52;
  --fd-bg2-rgb: 38,51,73;
  --fd-surf5-rgb: 19,28,44;
  --fd-surf7-rgb: 29,43,66;
  --fd-surf9-rgb: 51,65,90;
  --fd-accent-rgb: 74,158,255;
  --fd-muted-rgb: 148,163,184;
  --fd-wash-rgb: 226,232,240;
  --fd-overlay-rgb: 8,13,22;
}

/* ----------------------------------------------------------------------------
   Reconcile the app's OWN design-system variables to the token palette.
   The app (dark-authored) defines these inverted in :root and again in its
   [data-theme="dark"] block. :root:root (specificity 0,2,0) beats both, and
   because each points at an --fd-* token that auto-switches, one block is
   correct in BOTH themes. This is what makes light/dark actually flip.
   ---------------------------------------------------------------------------- */
:root:root {
  --bg-primary: var(--fd-bg);
  --bg-secondary: var(--fd-panel);
  --bg-accent: var(--fd-bg2);
  --bg-card: var(--fd-panel);
  --card-bg: var(--fd-panel);
  --text-primary: var(--fd-ink);
  --text-secondary: var(--fd-muted2);
  --text-muted: var(--fd-muted);
  --border-color: var(--fd-border);
  --border-hover: var(--fd-border2);
  --border-accent: var(--fd-accent);
  --accent-primary: var(--fd-accent);
  --accent-hover: var(--fd-accent2);
  --accent-light: rgba(var(--fd-accent-rgb), 0.1);
  --accent-text: var(--fd-accent);
  --success: var(--fd-good);
  --warning: var(--fd-warn);
  --error: var(--fd-bad);
  --header-bg: linear-gradient(135deg, var(--fd-panel) 0%, var(--fd-bg2) 100%);
  --input-bg: var(--fd-panel);
  --input-border: var(--fd-border);
  --brand-bright: var(--fd-accent);
}