/* ==========================================================================
   i3Codex Design System — Tokens & Foundations
   Source of Truth based on Components.dc.html & canvas.json
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&family=IBM+Plex+Sans:wght@400;500;600&family=Newsreader:ital,opsz,wght@0,6..72,300;0,6..72,400;0,6..72,500;1,6..72,300;1,6..72,400&display=swap');

:root {
  /* Ground & Surfaces */
  --color-ground: #F6F4EF;
  --color-surface: #FFFFFF;
  --color-surface-subtle: #FCFBF8;
  --color-surface-translucent: rgba(251, 250, 247, 0.92);
  --color-hairline: #E3DFD7;
  --color-hairline-subtle: #EDE9E1;
  --color-hairline-strong: #C9C3B7;

  /* Typography Colors */
  --color-ink: #16181C;
  --color-body: #4E535B;
  --color-muted: #9AA0A8;
  --color-subtle: #6D737C;

  /* Accent & Functional Brands */
  --color-accent: #1B5FB8;
  --color-accent-hover: #16181C;
  --color-accent-subtle: #E8EFFA;
  --color-accent-border: #C2D5F0;
  --color-technical: #0B6E86;
  --color-brand-cyan: #08C4DE;
  --color-brand-blue: #287AED;
  --brand-gradient: linear-gradient(100deg, #08C4DE 0%, #287AED 100%);

  /* Status & Chart Palettes (Validated for color-blind separation) */
  --color-chart-1: #1E63C8;
  --color-chart-good: #0E8C7A;
  --color-good-bg: #E9F4F1;
  --color-good-text: #0E7A6B;
  --color-chart-alert: #B0553A;
  --color-alert-bg: #FBF3EF;
  --color-alert-border: #E8D5CC;
  --color-alert-text: #8A4530;

  /* Elevation Ladder (All white surfaces pair deep soft drop with top highlight) */
  --elevation-e0: 0 0 0 1px rgba(22, 24, 28, 0.055), inset 0 1px 0 rgba(255, 255, 255, 0.95);
  --elevation-e1: 0 1px 3px rgba(22, 24, 28, 0.07), 0 0 0 1px rgba(22, 24, 28, 0.055), inset 0 1px 0 rgba(255, 255, 255, 0.95);
  --elevation-e2: 0 6px 16px -8px rgba(22, 24, 28, 0.14), 0 2px 4px -2px rgba(22, 24, 28, 0.07), 0 0 0 1px rgba(22, 24, 28, 0.055), inset 0 1px 0 rgba(255, 255, 255, 0.95);
  --elevation-e3: 0 20px 44px -20px rgba(22, 24, 28, 0.24), 0 6px 12px -6px rgba(22, 24, 28, 0.10), 0 0 0 1px rgba(22, 24, 28, 0.055), inset 0 1px 0 rgba(255, 255, 255, 0.95);
  --elevation-e4: 0 38px 66px -24px rgba(22, 24, 28, 0.26), 0 10px 20px -10px rgba(22, 24, 28, 0.13), 0 0 0 1px rgba(22, 24, 28, 0.055), inset 0 1px 0 rgba(255, 255, 255, 0.95);
  
  /* Focus & Button Shadows */
  --shadow-btn-primary: 0 4px 11px -2px rgba(27, 95, 184, 0.42), 0 1px 3px rgba(22, 24, 28, 0.14);
  --shadow-btn-primary-hover: 0 14px 26px -10px rgba(22, 24, 28, 0.42), 0 4px 8px -4px rgba(22, 24, 28, 0.24);
  --shadow-btn-secondary: 0 1px 3px rgba(22, 24, 28, 0.06);
  --shadow-btn-secondary-hover: 0 10px 18px -8px rgba(22, 24, 28, 0.24);

  /* Typography Families */
  --font-voice: 'Newsreader', Georgia, serif;
  --font-evidence: 'IBM Plex Sans', system-ui, -apple-system, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;

  /* Motion Timing Tokens */
  --motion-fast: 0.28s cubic-bezier(0.2, 0.7, 0.3, 1);
  --motion-btn: 0.32s cubic-bezier(0.2, 0.7, 0.3, 1);
  --motion-card: 0.40s cubic-bezier(0.2, 0.7, 0.3, 1);
  --motion-panel: 0.50s cubic-bezier(0.2, 0.7, 0.3, 1);

  /* Blueprint Grid */
  --blueprint-grid-size: 48px;
  --blueprint-grid-line: rgba(22, 24, 28, 0.042);
  --blueprint-bg: linear-gradient(var(--blueprint-grid-line) 1px, transparent 1px),
                  linear-gradient(90deg, var(--blueprint-grid-line) 1px, transparent 1px);
}