/* ═══════════════════════════════════════════════════════
   STEINKERNEL SYSTEMS — Design Tokens
   ═══════════════════════════════════════════════════════ */

:root {
  /* ─── Core Palette (Supplied by Client) ─── */
  --deep-navy: #003049;       /* Brand Anchor & Depth */
  --deep-burgundy: #780000;   /* High-Value Engineering Accent */
  --strong-red: #C1121F;      /* Confident Emphasis & Action (Text, Highlights) */
  --warm-cream: #FDF0D5;      /* Supporting Accent for Borders, Pills, Details (NOT section bg) */
  --muted-blue: #669BBC;      /* Technical Telemetry & Secondary Layer */
  --warm-amber: #FCA311;      /* Energetic Focus & Active Accent */

  /* ─── Base Surfaces & Neutrals (Clean, crisp, no beige) ─── */
  --white: #FFFFFF;
  --surface-warm: #FAF9F6;    /* Extremely subtle warm-white (barely off-white, never beige) */
  --warm-white: #FAF9F6;      /* Clean soft architectural neutral */
  --mist: #DDE5EC;
  --steel: #3D4A59;           /* High-contrast slate */
  --charcoal: #0F161E;        /* Deep architectural dark */
  --deep-slate: #162433;

  /* ─── Semantic Mappings (Navy Anchor) ─── */
  --navy: var(--deep-navy);
  --navy-light: #064566;
  --navy-deep: #001E2E;
  --navy-accent: var(--muted-blue);
  --navy-blue: var(--muted-blue);
  --navy-ice: #9BC1D9;
  --navy-soft: rgba(0, 48, 73, 0.08);
  --navy-border: rgba(0, 48, 73, 0.16);

  /* ─── Accent States ─── */
  --accent-burgundy: var(--deep-burgundy);
  --accent-red: var(--strong-red);
  --accent-amber: var(--warm-amber);
  --accent-blue: var(--muted-blue);
  --accent-cream: var(--warm-cream);

  /* Legacy mappings for components */
  --copper: var(--deep-navy);
  --copper-hover: #064566;
  --copper-glow: rgba(0, 48, 73, 0.25);
  --teal: #1A9A8B;
  --teal-soft: rgba(26, 154, 139, 0.12);
  --signal-amber: var(--warm-amber);
  --soft-green: #2E7D32;

  /* ─── Architectural System Node Accents ─── */
  --node-physical: var(--muted-blue);       /* #669BBC Muted Blue */
  --node-embedded: var(--deep-burgundy);     /* #780000 Deep Burgundy */
  --node-network: #1E6091;                  /* Blue Telemetry */
  --node-edge: var(--warm-amber);           /* #FCA311 Warm Amber */
  --node-software: #10B981;                 /* Green System */
  --node-intelligence: #0D9488;             /* Analytics Teal */
  --node-automation: var(--strong-red);     /* #C1121F Strong Red */
  --node-infrastructure: #4F46E5;           /* Enterprise Indigo */

  /* ─── Typography ─── */
  --font-display: 'Plus Jakarta Sans', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', 'Fira Code', monospace;

  /* ─── Font Sizes (fluid, refined) ─── */
  --text-xs: clamp(0.6875rem, 0.65rem + 0.15vw, 0.75rem);       /* 11-12px */
  --text-sm: clamp(0.8125rem, 0.78rem + 0.15vw, 0.875rem);     /* 13-14px */
  --text-base: clamp(1rem, 0.96rem + 0.15vw, 1.0625rem);       /* 16-17px */
  --text-lg: clamp(1.125rem, 1.05rem + 0.3vw, 1.25rem);        /* 18-20px */
  --text-xl: clamp(1.25rem, 1.15rem + 0.4vw, 1.5rem);          /* 20-24px */
  --text-2xl: clamp(1.5rem, 1.3rem + 0.7vw, 1.875rem);         /* 24-30px */
  --text-3xl: clamp(1.875rem, 1.6rem + 1vw, 2.5rem);           /* 30-40px */
  --text-4xl: clamp(2.25rem, 1.8rem + 1.6vw, 3.5rem);          /* 36-56px */
  --text-hero: clamp(2.75rem, 2.2rem + 2.4vw, 4.75rem);        /* 44-76px */

  /* ─── Line Heights ─── */
  --leading-tight: 1.1;
  --leading-snug: 1.25;
  --leading-normal: 1.6;
  --leading-relaxed: 1.75;

  /* ─── Letter Spacing ─── */
  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide: 0.04em;
  --tracking-wider: 0.08em;

  /* ─── Spacing Scale ─── */
  --space-xs: 0.5rem;     /* 8px */
  --space-sm: 1rem;        /* 16px */
  --space-md: 1.5rem;      /* 24px */
  --space-lg: 2rem;        /* 32px */
  --space-xl: 3rem;        /* 48px */
  --space-2xl: 4rem;       /* 64px */
  --space-3xl: 6rem;       /* 96px */
  --space-4xl: 8rem;       /* 128px */
  --space-section: clamp(5rem, 4rem + 4vw, 10rem);

  /* ─── Layout ─── */
  --max-width: 1340px;
  --max-width-narrow: 900px;
  --gutter: clamp(1.25rem, 1rem + 1.5vw, 3rem);
  --border-radius-sm: 6px;
  --border-radius-md: 12px;
  --border-radius-lg: 20px;

  /* ─── Shadows ─── */
  --shadow-sm: 0 1px 3px rgba(28, 29, 34, 0.06);
  --shadow-md: 0 4px 16px rgba(28, 29, 34, 0.08);
  --shadow-lg: 0 8px 40px rgba(28, 29, 34, 0.12);
  --shadow-card-hover: 0 12px 48px rgba(28, 29, 34, 0.16);

  /* ─── Transitions ─── */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.45, 0, 0.55, 1);
  --duration-fast: 200ms;
  --duration-normal: 400ms;
  --duration-slow: 700ms;

  /* ─── Z-Index ─── */
  --z-base: 1;
  --z-sticky: 100;
  --z-overlay: 200;
  --z-modal: 300;
  --z-nav: 400;
}