/* =====================================================================
   cbc-app-tokens.css  (v121)
   CareerByteCode console design tokens - the SINGLE token layer reused by
   every console surface (public Exams catalog v121, student v122, mentor
   v123, Studio v124). Full CBC blue on a light "paper" base, recolored from
   the reference layout: dark/lime/grain dropped, soft blue shadows + navy
   hairlines, Space Grotesk (display) + JetBrains Mono (labels) to match the
   live site. Self-contained; no external build. Signed off 2026-08-03.

   Pair with cbc-app.css (the component kit). Load fonts in the page head:
     Space Grotesk (400-700) + JetBrains Mono (400,500).
   ===================================================================== */
:root {
  /* Surfaces */
  --cbc-bg:          #FAFAFA;   /* Milky White page */
  --cbc-bg-elev:     #FFFFFF;   /* elevated chrome (sidebar, topbar) */
  --cbc-surface:     #FFFFFF;   /* card */
  --cbc-surface-2:   #F4F8FD;   /* blue-tinted panel */
  --cbc-line:        rgba(13,71,161,0.10);   /* navy hairline */
  --cbc-line-strong: rgba(13,71,161,0.20);

  /* Ink */
  --cbc-ink:      #0C1B36;   /* near-navy body text */
  --cbc-ink-dim:  #5B6781;   /* muted - matches live site */
  --cbc-ink-mute: #8A93A6;

  /* Accents */
  --cbc-accent:     #1E88E5;   /* Silky Blue - primary */
  --cbc-accent-2:   #64B5F6;   /* Light Sky Blue - secondary */
  --cbc-accent-ink: #FFFFFF;   /* text on primary */
  --cbc-navy:       #0D47A1;   /* Dark Navy - headings, active nav, deep CTA */

  /* Semantic */
  --cbc-ok:     #2E7D32;
  --cbc-warn:   #ED9F27;
  --cbc-danger: #C62828;

  /* Type */
  --cbc-f-display: 'Space Grotesk', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --cbc-f-ui:      'Space Grotesk', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --cbc-f-mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Spacing scale (airy default) */
  --cbc-s-1: 4px;  --cbc-s-2: 8px;  --cbc-s-3: 12px; --cbc-s-4: 16px;
  --cbc-s-5: 24px; --cbc-s-6: 32px; --cbc-s-7: 48px; --cbc-s-8: 64px;

  /* Radii */
  --cbc-r-1: 6px; --cbc-r-2: 10px; --cbc-r-3: 16px; --cbc-r-pill: 999px;

  /* Soft CBC-blue shadows (replace the reference glow) */
  --cbc-shadow-1: 0 1px 2px rgba(13,71,161,.05), 0 10px 28px -14px rgba(13,71,161,.18);
  --cbc-shadow-2: 0 2px 6px rgba(13,71,161,.06), 0 18px 44px -20px rgba(13,71,161,.24);
}