/* CU3B Design System — shared tokens
   Warm-white Material lean, calm blue accent, JetBrains Mono numerics. */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,300..500,0..1,-50..200');

:root {
  /* Surfaces — warm whites */
  --bg:           #fafbfc;
  --bg-card:      #ffffff;
  --bg-elevated:  #ffffff;
  --bg-sunken:    #f3f5f7;
  --bg-rail:      #f6f7f9;

  /* Borders / hairlines */
  --border:       #e6e8ec;
  --border-hi:    #d4d7dd;
  --border-soft:  #eef0f3;

  /* Text */
  --fg:           #1a1d21;
  --fg-strong:    #0a0c0f;
  --fg-muted:     #5a6068;
  --fg-dim:       #8a909a;
  --fg-faint:     #b6bac2;

  /* Accent — single calm blue */
  --accent:       oklch(0.62 0.14 250);
  --accent-hover: oklch(0.56 0.16 250);
  --accent-soft:  oklch(0.96 0.025 250);
  --accent-line:  oklch(0.88 0.05 250);
  --accent-ink:   oklch(0.40 0.16 250);

  /* Semantic — gentle, low-chroma */
  --good:         oklch(0.62 0.13 155);
  --good-soft:    oklch(0.95 0.04 155);
  --warn:         oklch(0.72 0.13 75);
  --warn-soft:    oklch(0.96 0.05 75);
  --bad:          oklch(0.60 0.16 25);
  --bad-soft:     oklch(0.96 0.04 25);

  /* Grade colour ramp */
  --grade-a:      oklch(0.62 0.13 155);
  --grade-b:      oklch(0.66 0.11 165);
  --grade-c:      oklch(0.72 0.13 75);
  --grade-d:      oklch(0.66 0.14 45);
  --grade-f:      oklch(0.60 0.16 25);

  /* Type */
  --font-sans:    'Inter', -apple-system, system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', monospace;

  /* Radius */
  --r-xs: 4px;
  --r-sm: 8px;
  --r:    12px;
  --r-lg: 16px;
  --r-xl: 20px;

  /* Shadows — layered, warm */
  --sh-1: 0 1px 2px rgba(15, 23, 42, 0.05), 0 1px 3px rgba(15, 23, 42, 0.04);
  --sh-2: 0 1px 2px rgba(15, 23, 42, 0.06), 0 4px 12px rgba(15, 23, 42, 0.04);
  --sh-3: 0 2px 4px rgba(15, 23, 42, 0.06), 0 12px 28px rgba(15, 23, 42, 0.07);
  --sh-4: 0 4px 8px rgba(15, 23, 42, 0.08), 0 24px 48px rgba(15, 23, 42, 0.10);
  --sh-focus: 0 0 0 3px oklch(0.88 0.05 250 / 0.6);

  /* Spacing scale (for reference) */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-8: 32px;
  --s-10: 40px;

  --header-h: 56px;
}

[data-theme="dark"] {
  --bg:           #0e1014;
  --bg-card:      #161a20;
  --bg-elevated:  #1b2028;
  --bg-sunken:    #0a0c10;
  --bg-rail:      #14171d;

  --border:       #232831;
  --border-hi:    #303744;
  --border-soft:  #1d2129;

  --fg:           #e8eaee;
  --fg-strong:    #ffffff;
  --fg-muted:     #9ba3b0;
  --fg-dim:       #6b7280;
  --fg-faint:     #4b5260;

  --accent:       oklch(0.72 0.14 250);
  --accent-hover: oklch(0.78 0.14 250);
  --accent-soft:  oklch(0.30 0.08 250 / 0.4);
  --accent-line:  oklch(0.40 0.10 250);
  --accent-ink:   oklch(0.85 0.12 250);

  --good-soft:    oklch(0.35 0.07 155 / 0.35);
  --warn-soft:    oklch(0.40 0.08 75 / 0.30);
  --bad-soft:     oklch(0.40 0.10 25 / 0.30);

  --sh-1: 0 1px 2px rgba(0, 0, 0, 0.4);
  --sh-2: 0 1px 2px rgba(0, 0, 0, 0.45), 0 4px 12px rgba(0, 0, 0, 0.35);
  --sh-3: 0 2px 6px rgba(0, 0, 0, 0.50), 0 12px 28px rgba(0, 0, 0, 0.45);
  --sh-4: 0 4px 12px rgba(0, 0, 0, 0.55), 0 24px 48px rgba(0, 0, 0, 0.55);
  --sh-focus: 0 0 0 3px oklch(0.50 0.10 250 / 0.5);
}

/* Base reset */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--fg);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
input, select, textarea { font: inherit; color: inherit; }
.mono, .num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  user-select: none;
}

/* Scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-hi); border-radius: 10px; border: 2px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background: var(--fg-faint); }