/* Color tokens for the app's two themes. Dark is the bare :root default;
   light overrides only the tokens, under :root[data-theme="light"], set by
   base.html's toggle button (persisted to localStorage, applied before
   paint by an inline script in <head> to avoid a flash of the wrong
   theme). Every template references these via Tailwind arbitrary values,
   e.g. bg-[var(--bg)], instead of a literal hex, so this file is the only
   place a theme's actual colors live.

   2026-10-07: values replaced with the Big Blue Academy (BBDA) design
   system - blue #3366CC for actions/links/active states, teal #1AA39A for
   the one thing to notice (gap skills, coverage, active step), violet for
   category tags (seniority), green/red only for status. Light values are
   BBDA tokens; dark ones are derived from the same palette. Token names
   are unchanged from the previous theme; new ones are marked NEW. */

:root {
  /* surfaces */
  --bg: #0B1222;
  --surface: #111A2E;
  --surface-2: #18233B;          /* inset areas: info notes, dropzone, assistant bubbles, tracks */
  --surface-raised: #111A2E;     /* cards (= surface; BBDA cards have no elevation) */
  --border: #223049;             /* card borders, dividers */
  --border-strong: #34425F;      /* NEW: control borders (inputs, selects, secondary buttons) */
  /* text */
  --ink: #E9EDF5;
  --ink-soft: #A6B0C5;
  --ink-faint: #8691A8;          /* >=4.5:1 on --surface */
  /* brand blue: fill and text are split in dark for contrast */
  --accent-fg: #8AB0F7;          /* links, active tab/step, secondary + ghost button text */
  --accent-bg: #3366CC;          /* primary button fill (white text 5.3:1) */
  --accent-bg-hover: #4272D4;
  --accent-bg-press: #2B57B5;    /* NEW */
  --accent-ink: #FFFFFF;
  --accent-tint-bg: rgba(51,102,204,.20);
  --accent-tint-bg-strong: rgba(51,102,204,.32);
  /* teal highlight - NEW (gap skills, coverage meter, active-step square, title bar) */
  --highlight: #1AA39A;
  --highlight-fg: #4FCFC4;
  --highlight-tint-bg: rgba(26,163,154,.14);
  --highlight-border: rgba(26,163,154,.60);
  /* violet category tag - NEW (seniority badge) */
  --tag-fg: #B7A9FF;
  --tag-bg: rgba(123,97,255,.18);
  /* status */
  --matched: #5FD38D;
  --matched-tint-bg: rgba(95,211,141,.12);
  --missing-border: #3A486A;
  --danger: #FF6B6B;
  /* effects - NEW */
  --focus-ring: 0 0 0 3px rgba(138,176,247,.40);
  --scrim: rgba(3,7,16,.72);
  --shadow-lg: 0 20px 48px rgba(0,0,0,.45);   /* dialog only */
}

:root[data-theme="light"] {
  --bg: #F7F8FB;
  --surface: #FFFFFF;
  --surface-2: #F1F2F5;
  --surface-raised: #FFFFFF;
  --border: #E4E4E7;
  --border-strong: #C9CED8;
  --ink: #0F1B33;
  --ink-soft: #57627A;
  --ink-faint: #687286;
  --accent-fg: #3366CC;
  --accent-bg: #3366CC;
  --accent-bg-hover: #1E4A9E;
  --accent-bg-press: #173C82;
  --accent-ink: #FFFFFF;
  --accent-tint-bg: #EAF1FB;
  --accent-tint-bg-strong: #DCE6F7;
  --highlight: #1AA39A;
  --highlight-fg: #0E7F78;
  --highlight-tint-bg: #E3F4F2;
  --highlight-border: #1AA39A;
  --tag-fg: #6A4FE0;
  --tag-bg: #EFECFF;
  --matched: #1F8A5B;
  --matched-tint-bg: #E6F4EC;
  --missing-border: #C9CED8;
  --danger: #C62828;
  --focus-ring: 0 0 0 3px rgba(51,102,204,.35);
  --scrim: rgba(15,27,51,.45);
  --shadow-lg: 0 20px 48px rgba(15,27,51,.18);
}

/* The theme-toggle button's two icons - only one shows at a time, chosen
   by attribute selector alone so a click only ever needs to flip
   data-theme, never touch a class list. Each icon represents the theme a
   click switches TO, not the current one. */
#theme-toggle .icon-moon {
  display: none;
}
:root[data-theme="light"] #theme-toggle .icon-sun {
  display: none;
}
:root[data-theme="light"] #theme-toggle .icon-moon {
  display: block;
}

body { transition: background-color 140ms cubic-bezier(.2,.6,.2,1), color 140ms cubic-bezier(.2,.6,.2,1); }
:focus-visible { outline: none; box-shadow: var(--focus-ring); }