/* ============================================================================
   tokens.css — the design system source. Every colour, size and radius the
   portal uses is declared here and nowhere else; base.css and components.css
   only reference these names.

   Light-first. Dark is a token swap only (no other file knows the theme).
   Approved on the design-direction item (#3484): accent B indigo, teal for
   in-progress because the accent is blue, neutral paper/surface, IBM Plex.
   Values are transcribed from the approval note — change them there first.
   ========================================================================== */
:root {
  /* neutrals */
  --paper: #F7F7F5;
  --surface: #FFFFFF;
  --surface-2: #F1F1EE;
  --line: #E3E3DE;
  --line-strong: #C9CAC4;
  --ink: #1A1A1A;
  --ink-2: #4B5250;
  --ink-3: #5F6B66;

  /* accent — B indigo */
  --accent: #3B5BDB;
  --accent-hover: #2E48B8;
  --accent-soft: #EEF1FF;
  --accent-on: #FFFFFF;

  /* status: a word with a dot; -soft is the only background a status word gets */
  --ok: #1E7A52;
  --ok-soft: #E1F0E8;
  --info: #0E7C86;
  --info-soft: #DCF1F3;
  --warn: #B45309;
  --warn-soft: #FAEBD9;
  --bad: #A33324;
  --bad-soft: #F7E2DE;
  --muted: #5B6B62;
  --muted-soft: #ECEEEC;

  /* surfaces that are not colours of their own */
  --skeleton: #ECECE8;
  --scrim: rgba(26, 26, 26, 0.32);
  --shadow: 0 1px 2px rgba(20, 22, 24, 0.06);
  --shadow-lg: 0 8px 24px rgba(20, 22, 24, 0.14);
  --focus: var(--accent);

  /* type */
  --font-sans: "IBM Plex Sans", "Segoe UI", -apple-system, Helvetica, Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;
  --text-xs: 11px;
  --text-sm: 12px;
  --text-base: 14px;
  --text-md: 16px;
  --text-lg: 20px;
  --text-xl: 28px;

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

  /* radius */
  --r-1: 4px;
  --r-2: 8px;
  --r-round: 999px;

  /* controls */
  --control-h: 36px;
  --rail-w: 232px;
}

/* Dark: follow the OS unless the user chose light explicitly … */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #141618;
    --surface: #1B1E1D;
    --surface-2: #23272A;
    --line: #2C3130;
    --line-strong: #3E4442;
    --ink: #E6E8E6;
    --ink-2: #AEB4B1;
    --ink-3: #8C9490;

    --accent: #91A7FF;
    --accent-hover: #B3C2FF;
    --accent-soft: #1E2540;
    --accent-on: #10141C;

    --ok: #4FB183;
    --ok-soft: #172B22;
    --info: #5FD3DC;
    --info-soft: #10302F;
    --warn: #F0B35B;
    --warn-soft: #3A2A12;
    --bad: #E0705C;
    --bad-soft: #3A1C18;
    --muted: #8FA096;
    --muted-soft: #262B29;

    --skeleton: #2A2F2D;
    --scrim: rgba(0, 0, 0, 0.55);
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5);
  }
}

/* … and always when the user chose dark. Same values, repeated on purpose so
   the toggle wins in both directions. */
:root[data-theme="dark"] {
  --paper: #141618;
  --surface: #1B1E1D;
  --surface-2: #23272A;
  --line: #2C3130;
  --line-strong: #3E4442;
  --ink: #E6E8E6;
  --ink-2: #AEB4B1;
  --ink-3: #8C9490;

  --accent: #91A7FF;
  --accent-hover: #B3C2FF;
  --accent-soft: #1E2540;
  --accent-on: #10141C;

  --ok: #4FB183;
  --ok-soft: #172B22;
  --info: #5FD3DC;
  --info-soft: #10302F;
  --warn: #F0B35B;
  --warn-soft: #3A2A12;
  --bad: #E0705C;
  --bad-soft: #3A1C18;
  --muted: #8FA096;
  --muted-soft: #262B29;

  --skeleton: #2A2F2D;
  --scrim: rgba(0, 0, 0, 0.55);
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5);
}