/**
 * INTEF Canvas Studio - Design Tokens
 * Based on Technical Institutional Canvas (Stitch System)
 */

:root {
  /* Surface Foundations */
  --surface: #f8f9ff;
  --surface-dim: #cbdbf5;
  --surface-bright: #f8f9ff;
  --surface-container-lowest: #ffffff;
  --surface-container-low: #eff4ff;
  --surface-container: #e5eeff;
  --surface-container-high: #dce9ff;
  --surface-container-highest: #d3e4fe;
  --background: #f8f9ff;

  /* Typography & On-Surface Colors */
  --on-surface: #0b1c30;
  --on-surface-variant: #42474d;
  --on-background: #0b1c30;
  --inverse-surface: #213145;
  --inverse-on-surface: #eaf1ff;

  /* Primary Brand Navy */
  --primary: #002b49;
  --primary-deep: #001629;
  --primary-hover: #001d34;
  --on-primary: #ffffff;
  --primary-container: #002b49;
  --on-primary-container: #7293b6;
  --primary-fixed: #cfe5ff;
  --primary-fixed-dim: #a8caef;

  /* Secondary Accent Gold / Amber */
  --secondary: #565e74;
  --secondary-container: #dae2fd;
  --on-secondary-container: #5c647a;
  --accent-gold: #ffc700;
  --accent-gold-container: #ffc703;
  --accent-gold-deep: #f5bf00;
  --accent-gold-hover: #e5b300;
  --on-accent-gold: #002b49;

  /* Borders & Outlines */
  --outline: #73777e;
  --outline-variant: #c3c7ce;
  --border-subtle: #cbd5e1;
  --border-light: #e2e8f0;

  /* Status & Semantics */
  --status-active-pulse: #10b981;
  --status-progress: #ffc700;
  --status-planned: #94a3b8;

  /* Typography Stacks */
  --font-main: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', monospace;

  /* Elevation Shadows */
  --shadow-sm: 0 1px 3px 0 rgba(0, 43, 73, 0.06), 0 1px 2px -1px rgba(0, 43, 73, 0.04);
  --shadow-md: 0 4px 6px -1px rgba(0, 43, 73, 0.07), 0 2px 4px -2px rgba(0, 43, 73, 0.05);
  --shadow-lg: 0 10px 15px -3px rgba(0, 43, 73, 0.08), 0 4px 6px -4px rgba(0, 43, 73, 0.04);
  --shadow-card: 0 1px 3px 0 rgba(0, 43, 73, 0.06), 0 10px 20px -5px rgba(0, 43, 73, 0.04);
  --shadow-card-hover: 0 12px 24px -6px rgba(0, 43, 73, 0.12), 0 4px 8px -2px rgba(0, 43, 73, 0.06);

  /* Border Radii */
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --radius-full: 9999px;

  /* Spacing */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 0.75rem;
  --space-lg: 1rem;
  --space-xl: 1.5rem;
  --space-2xl: 2rem;

  /* Transitions */
  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-normal: 250ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* Dark Mode Theme Tokens */
html.dark {
  --surface: #0b1726;
  --surface-dim: #08111c;
  --surface-bright: #0f1f33;
  --surface-container-lowest: #0c1a2d;
  --surface-container-low: #10223b;
  --surface-container: #152b49;
  --surface-container-high: #1a355a;
  --surface-container-highest: #20406d;
  --background: #08101a;

  --on-surface: #eaf1ff;
  --on-surface-variant: #9fb0c7;
  --on-background: #eaf1ff;
  --inverse-surface: #f8f9ff;
  --inverse-on-surface: #0b1c30;

  --primary: #5294e2;
  --primary-deep: #2563eb;
  --primary-hover: #60a5fa;
  --on-primary: #ffffff;
  --primary-container: #122844;
  --on-primary-container: #cfe5ff;

  --secondary: #94a3b8;
  --secondary-container: #1e293b;
  --on-secondary-container: #e2e8f0;

  --accent-gold: #ffc700;
  --accent-gold-container: #ffc703;
  --accent-gold-deep: #f5bf00;
  --on-accent-gold: #002b49;

  --outline: #475569;
  --outline-variant: #334155;
  --border-subtle: #1e3a5f;
  --border-light: #162d4a;

  --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5);
  --shadow-card: 0 4px 20px rgba(0, 0, 0, 0.4);
  --shadow-card-hover: 0 12px 30px rgba(0, 0, 0, 0.6);
}