/* ───────────────────────────────────────────────────────────────────────────
   BounceZero admin console — design tokens

   Organising principle: greyscale by default, colour only where STATE exists.
   An operator scanning this page should be able to trust that anything
   coloured means something is ok, degraded, or broken. Nothing is coloured
   for decoration. The one exception is --brand, reserved for exactly two
   jobs: marking where you are in the nav, and the primary action on a view.

   Surfaces are cool slate rather than tinted black, so that the state hues
   stay legible against them during long sessions.
   ─────────────────────────────────────────────────────────────────────────── */

@font-face{font-family:'IBM Plex Sans';src:url('/assets/fonts/IBMPlexSans-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'IBM Plex Sans';src:url('/assets/fonts/IBMPlexSans-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'IBM Plex Sans';src:url('/assets/fonts/IBMPlexSans-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'IBM Plex Mono';src:url('/assets/fonts/IBMPlexMono-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'IBM Plex Mono';src:url('/assets/fonts/IBMPlexMono-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}

:root{
  /* surfaces — four levels, cool slate */
  --base:      #141a21;
  --surface:   #1b222b;
  --surface-2: #222b36;
  --line:      #2b3542;
  --line-soft: #232c37;

  /* text */
  --text:  #e3e8ef;
  --muted: #8d9aac;
  --dim:   #5d6a7c;

  /* state — the only colours that carry meaning */
  --ok:   #3fb27f;
  --warn: #e0a33a;
  --bad:  #e05c5c;
  --info: #4d8fd6;
  --ok-bg:   rgba(63,178,127,.12);
  --warn-bg: rgba(224,163,58,.12);
  --bad-bg:  rgba(224,92,92,.12);
  --info-bg: rgba(77,143,214,.12);

  /* brand — where you are, and the primary action. Nothing else. */
  --brand:    #ec1e63;
  --brand-dk: #c91550;

  /* type */
  --sans: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --fs-xs: 11.5px;
  --fs-sm: 12.5px;
  --fs-md: 13.5px;
  --fs-lg: 16px;
  --fs-xl: 21px;
  --fs-display: 28px;

  /* geometry — small and consistent; an ops console should read precise */
  --r:    4px;
  --r-lg: 6px;
  --rail: 232px;
  --topbar: 52px;

  --ease: cubic-bezier(.4,0,.2,1);

  /* depth — soft, low-spread shadows (Linear/Stripe register, not Material) */
  --shadow-sm: 0 1px 2px rgba(0,0,0,.28), 0 1px 1px rgba(0,0,0,.2);
  --shadow-md: 0 4px 14px -4px rgba(0,0,0,.45), 0 2px 5px -2px rgba(0,0,0,.35);
  --shadow-pop: 0 18px 44px -12px rgba(0,0,0,.6);
  --ring: rgba(236,30,99,.14);

  color-scheme: dark;
}

/* ── Light theme ─────────────────────────────────────────────────────────────
   Dark is the default (:root above). Light is a full override applied when the
   viewer picks it, or when their system prefers light and they have not chosen.
   head.php resolves system preference to an explicit data-theme before paint,
   so there is no flash and these two selectors are all that's needed.

   State hues are nudged a touch darker here so they keep contrast on white;
   the accent tints (--*-bg, and the .a-* presets) are re-stated at higher
   opacity because a 12% wash that reads on near-black vanishes on near-white.
   ─────────────────────────────────────────────────────────────────────────── */
:root[data-theme="light"]{
  --base:      #eef1f6;
  --surface:   #ffffff;
  --surface-2: #f3f6fa;
  --line:      #e0e6ee;
  --line-soft: #eef1f6;

  --text:  #1b2432;
  --muted: #5b6878;
  --dim:   #93a0b1;

  --ok:   #1f9d63;
  --warn: #bd7d18;
  --bad:  #d13b38;
  --info: #2a74c0;
  --ok-bg:   rgba(31,157,99,.12);
  --warn-bg: rgba(189,125,24,.13);
  --bad-bg:  rgba(209,59,56,.11);
  --info-bg: rgba(42,116,192,.11);

  --shadow-sm: 0 1px 2px rgba(16,30,54,.06), 0 1px 1px rgba(16,30,54,.04);
  --shadow-md: 0 6px 18px -6px rgba(16,30,54,.12), 0 2px 6px -2px rgba(16,30,54,.08);
  --shadow-pop: 0 20px 48px -14px rgba(16,30,54,.22);
  --ring: rgba(236,30,99,.16);

  color-scheme: light;
}

:root[data-theme="light"] body{
  /* a faint cool wash so white cards lift off the page */
  background:
    radial-gradient(1200px 600px at 100% -10%, rgba(42,116,192,.05), transparent 60%),
    var(--base);
}

/* Re-state the accent presets for light so icon chips and figures stay vivid. */
:root[data-theme="light"] .a-brand  {--a:#d6155a;--a-bg:rgba(236,30,99,.12)}
:root[data-theme="light"] .a-ok     {--a:#1f9d63;--a-bg:rgba(31,157,99,.14)}
:root[data-theme="light"] .a-info   {--a:#2a74c0;--a-bg:rgba(42,116,192,.13)}
:root[data-theme="light"] .a-teal   {--a:#13998f;--a-bg:rgba(19,153,143,.14)}
:root[data-theme="light"] .a-violet {--a:#6f5de0;--a-bg:rgba(111,93,224,.14)}
:root[data-theme="light"] .a-warn,
:root[data-theme="light"] .a-amber  {--a:#bd7d18;--a-bg:rgba(189,125,24,.15)}