/* =============================================
   RRB Design Tokens — ops/shared master
   rrb-css-v: 2.0.0  (WCAG AA text, 11-step ramps, chart palette, display scale)
   Edit here; synced to all 8 projects by sync-css.sh.
   Monitored by check_css_sync() in monitor healthcheck.
   ============================================= */

@font-face {
  font-family: 'Inter var';
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  src: url('/static/fonts/InterVariable.woff2') format('woff2-variations'),
       url('/static/fonts/InterVariable.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter var';
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
  src: url('/static/fonts/InterVariable-Italic.woff2') format('woff2-variations'),
       url('/static/fonts/InterVariable-Italic.woff2') format('woff2');
}

:root {
  /* ========== Color ramps — 11 steps each ========== */

  /* Primary (RRB blue) */
  --primary-50:  #f2f7fb;
  --primary-100: #dfebf5;
  --primary-200: #bcd5e8;
  --primary-300: #8fb6d4;
  --primary-400: #5a91bc;
  --primary-500: #3379a8;
  --primary-600: #1a6aa3;  /* canonical brand blue */
  --primary-700: #155888;
  --primary-800: #11476d;
  --primary-900: #0d3652;
  --primary-950: #082538;

  /* Accent (RRB green) */
  --accent-50:  #eef9f1;
  --accent-100: #d5f1dd;
  --accent-200: #a8e3bc;
  --accent-300: #71d093;
  --accent-400: #3fbc6c;
  --accent-500: #0fa74a;
  --accent-600: #00c130;  /* canonical brand green */
  --accent-700: #009e26;
  --accent-800: #007a1d;
  --accent-900: #005515;
  --accent-950: #00330d;

  /* Warning (orange) */
  --warning-50:  #fff7ed;
  --warning-100: #ffedd5;
  --warning-200: #fed7aa;
  --warning-300: #fdba74;
  --warning-400: #fb923c;
  --warning-500: #f97316;
  --warning-600: #ef6c00;  /* canonical warning */
  --warning-700: #c2410c;
  --warning-800: #9a3412;
  --warning-900: #7c2d12;
  --warning-950: #431407;

  /* Danger (red) */
  --danger-50:  #fef2f2;
  --danger-100: #fde8ea;
  --danger-200: #fbc5ca;
  --danger-300: #f79aa2;
  --danger-400: #ef6b77;
  --danger-500: #dc3545;  /* canonical danger */
  --danger-600: #c82333;
  --danger-700: #b02a37;
  --danger-800: #8b1e28;
  --danger-900: #6b1720;
  --danger-950: #450a0e;

  /* Neutral gray */
  --gray-50:  #f8fafc;
  --gray-100: #f1f5f9;
  --gray-200: #e2e8f0;
  --gray-300: #cbd5e1;
  --gray-400: #94a3b8;
  --gray-500: #64748b;
  --gray-600: #475569;
  --gray-700: #334155;
  --gray-800: #1e293b;
  --gray-900: #0f172a;
  --gray-950: #020617;

  /* Data-viz palette — 8 perceptually distinct */
  --chart-1: var(--primary-600);
  --chart-2: var(--accent-600);
  --chart-3: var(--warning-600);
  --chart-4: #8b5cf6;
  --chart-5: #ec4899;
  --chart-6: #14b8a6;
  --chart-7: #f59e0b;
  --chart-8: var(--gray-500);

  /* ===== Brand aliases (canonical single-value) ===== */
  --primary:       var(--primary-600);
  --primary-dark:  var(--primary-700);
  --accent:        var(--accent-600);
  --accent-dark:   var(--accent-700);
  --warning:       var(--warning-600);
  --danger:        var(--danger-500);
  --danger-dark:   var(--danger-700);

  /* surfaces */
  --bg:             #f6f8fa;
  --surface:        #ffffff;
  --surface-muted:  #f2f4f7;

  /* text — WCAG AA compliant on white */
  --color-text:             #1d2530;  /* 15.8:1 AAA */
  --color-text-secondary:   #4a5463;  /*  8.2:1 AAA */
  --color-text-muted:       #5e6a7a;  /*  5.5:1 AA  */
  --color-text-subtle:      #6b7684;  /*  4.7:1 AA  */
  --color-text-ornamental:  #8d96a2;  /*  3.0:1 — decorative only, 18px+ bold */

  /* text (short aliases kept for existing stylesheets) */
  --text:           var(--color-text);
  --text-muted:     var(--color-text-muted);
  --text-subtle:    var(--color-text-subtle);

  /* borders */
  --border:         var(--gray-200);
  --border-strong:  var(--gray-300);

  /* radii */
  --r-btn:          6px;
  --r-field:        8px;
  --r-card:         12px;

  /* motion */
  --t:              180ms;
  --ease:           cubic-bezier(.2, .8, .2, 1);

  /* elevation */
  --e1:             0 1px 2px rgba(15, 23, 42, .04);
  --e2:             0 4px 12px rgba(15, 23, 42, .06);
  --e3:             0 8px 24px rgba(15, 23, 42, .10);

  /* typography */
  --font:           'Inter var', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono:      'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --fs-xs:          12px;
  --fs-sm:          13px;
  --fs-md:          14px;
  --fs-lg:          16px;
  --fs-xl:          20px;
  --fs-2xl:         26px;

  /* Display type scale — heroes + large stats */
  --fs-3xl:         32px;
  --fs-4xl:         40px;
  --fs-5xl:         56px;
  --fs-6xl:         72px;
  --fw-display:     800;

  /* spacing (carried from app.css for continuity) */
  --sp-xs:          4px;
  --sp-sm:          8px;
  --sp-md:          12px;
  --sp-lg:          16px;
  --sp-xl:          24px;
  --sp-2xl:         32px;

  /* ===== Legacy aliases (phased out in Wave 5) ===== */
  --color-primary:        var(--primary);
  --color-primary-dark:   var(--primary-dark);
  --color-accent:         var(--accent);
  --color-accent-dark:    var(--accent-dark);
  --color-warning:        var(--warning);
  --color-danger:         var(--danger);
  --color-danger-dark:    var(--danger-dark);
  --color-sidebar-bg:     #1a2533;
  --color-sidebar-text:   #c9d1d9;
  --color-sidebar-hover:  rgba(255, 255, 255, 0.08);
  --color-sidebar-active: rgba(26, 106, 163, 0.3);
  --sidebar-width:        220px;
  --sidebar-collapsed-width: 56px;
  --font-family:          var(--font);
  --font-size-body:       var(--fs-md);
  --font-size-small:      var(--fs-xs);
  --font-size-large:      var(--fs-lg);
  --spacing-xs:           var(--sp-xs);
  --spacing-sm:           var(--sp-sm);
  --spacing-md:           var(--sp-md);
  --spacing-lg:           var(--sp-lg);
  --spacing-xl:           var(--sp-xl);
  --spacing-2xl:          var(--sp-2xl);
}

html, body {
  font-family: var(--font);
  font-feature-settings: 'cv01', 'ss03', 'tnum';
  letter-spacing: -0.005em;
  color: var(--text);
  background: var(--bg);
}