/* ============================================================
   Design tokens — the single source of truth for the whole app.
   Linked FIRST on every page. No other file redefines these.
   Cool-slate neutrals biased toward a refined LinkedIn blue.
   Light is the default; [data-theme] overrides in both directions.
   ============================================================ */
:root {
  color-scheme: light dark;

  /* grounds & surfaces */
  --bg: #f5f7f9;
  --bg-accent: linear-gradient(180deg, #ffffff 0%, #f5f7f9 100%);
  --surface: #ffffff;
  --surface-2: #fafbfc;
  --surface-inset: #f2f4f7;
  --border: #e6e9ee;
  --border-strong: #d4d9e1;

  /* ink */
  --ink: #0d1522;
  --ink-2: #454e5d;
  --ink-3: #79828f;
  --ink-4: #9aa2ad;

  /* brand — the real LinkedIn blue, deepened one notch for gravity */
  --accent: #0b5cad;
  --accent-2: #094c90;
  --accent-ink: #0a4e93;
  --accent-wash: #e9f1fa;
  --accent-line: #c7ddf1;

  /* semantic — distinct from the accent */
  --pos: #157347; --pos-wash: #e5f1ea;
  --warn: #96690f; --warn-wash: #f5ecd8;
  --neg: #b42318; --neg-wash: #f7e5e2;

  /* categorical (charts / creative types) */
  --c1: #0b5cad; --c2: #2a9d8f; --c3: #6b4fb8;
  --c4: #c07a13; --c5: #b0476b; --c6: #5c6b7a;

  /* elevation — flat: one card, one overlay */
  --shadow-card: 0 1px 1px rgba(13,21,34,.04), 0 1px 3px rgba(13,21,34,.05);
  --shadow-pop: 0 10px 34px rgba(13,21,34,.14);

  /* radius tiers */
  --r-sm: 7px; --r-md: 10px; --r-lg: 14px; --r-pill: 999px;

  /* spacing scale (4-based) */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 20px; --s6: 24px; --s8: 32px;

  /* type */
  --sans: "SF Pro Display", "Segoe UI Variable", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  --mono: "SF Mono", "JetBrains Mono", ui-monospace, "Cascadia Code", Menlo, monospace;

  /* legacy aliases — keep older page CSS working; resolve to the new system
     in both themes. Remove once every stylesheet uses the new names. */
  --card: var(--surface);
  --card-alt: var(--surface-2);
  --text: var(--ink);
  --muted: var(--ink-3);
  --soft: var(--accent-wash);
  --accent-light: var(--accent-wash);
  --green: var(--pos);
  --amber: var(--warn);
  --orange: var(--c4);
  --red: var(--neg);
  --indigo: var(--c3);
  --teal: var(--c2);
  --shadow: var(--shadow-card);
  --shadow-sm: var(--shadow-card);
  --shadow-md: var(--shadow-pop);
}

/* Dark palette. Applied by OS preference (unless the user forced light)…  */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #0a0e15;
    --bg-accent: linear-gradient(180deg, #0f151f 0%, #0a0e15 100%);
    --surface: #121926;
    --surface-2: #0f151f;
    --surface-inset: #0c121b;
    --border: #212b3a;
    --border-strong: #2c3849;
    --ink: #e9edf3;
    --ink-2: #aab4c2;
    --ink-3: #6f7b8c;
    --ink-4: #576273;
    --accent: #4f9fe4;
    --accent-2: #6cb0ea;
    --accent-ink: #85bdec;
    --accent-wash: #10263c;
    --accent-line: #1d3a55;
    --pos: #4cae7f; --pos-wash: #10251a;
    --warn: #cf9a3f; --warn-wash: #2a2110;
    --neg: #dd8175; --neg-wash: #2b1612;
    --c1: #4f9fe4; --c2: #3fb5a6; --c3: #9a80e0;
    --c4: #d59a3d; --c5: #d1748f; --c6: #8592a2;
    --shadow-card: 0 1px 2px rgba(0,0,0,.4);
    --shadow-pop: 0 14px 44px rgba(0,0,0,.55);
  }
}

/* … or by the explicit toggle, which wins over the media query both ways. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0a0e15;
  --bg-accent: linear-gradient(180deg, #0f151f 0%, #0a0e15 100%);
  --surface: #121926;
  --surface-2: #0f151f;
  --surface-inset: #0c121b;
  --border: #212b3a;
  --border-strong: #2c3849;
  --ink: #e9edf3;
  --ink-2: #aab4c2;
  --ink-3: #6f7b8c;
  --ink-4: #576273;
  --accent: #4f9fe4;
  --accent-2: #6cb0ea;
  --accent-ink: #85bdec;
  --accent-wash: #10263c;
  --accent-line: #1d3a55;
  --pos: #4cae7f; --pos-wash: #10251a;
  --warn: #cf9a3f; --warn-wash: #2a2110;
  --neg: #dd8175; --neg-wash: #2b1612;
  --c1: #4f9fe4; --c2: #3fb5a6; --c3: #9a80e0;
  --c4: #d59a3d; --c5: #d1748f; --c6: #8592a2;
  --shadow-card: 0 1px 2px rgba(0,0,0,.4);
  --shadow-pop: 0 14px 44px rgba(0,0,0,.55);
}
:root[data-theme="light"] { color-scheme: light; }