/* ==========================================================================
   DESIGN TOKENS — Executive Backend & AI Systems Portfolio
   ========================================================================== */

:root {
  /* --- Canvas & Surface Colors (Pure Obsidian Void — No Blue Wash) --- */
  --bg-void: #060709;
  --bg-surface: #090a0e;
  --bg-surface-elevated: #0f1118;
  --bg-surface-elevated-2: #161822;
  --bg-surface-hover: #171924;
  --bg-glass: rgba(9, 10, 14, 0.84);

  /* --- Accent Colors (Calibrated Crimson Signature) --- */
  --accent-crimson: #e50914;
  --accent-crimson-bright: #ff2a34;
  --accent-crimson-glow: rgba(229, 9, 20, 0.22);
  --accent-vermilion: #ff3b47;
  --accent-cyan: #00f0ff;
  --accent-cyan-glow: rgba(0, 240, 255, 0.18);
  --accent-gold: #ffd23f;

  /* --- Typography Colors (WCAG AAA / AA Compliant) --- */
  --text-primary: #ffffff;
  --text-secondary: #c4c9d4;
  --text-muted: #828a9c;
  --text-dim: #717888;

  /* --- Borders & Structural Lines (Subtle Hairlines & Specular Edges) --- */
  --border-subtle: rgba(255, 255, 255, 0.05);
  --border-hairline: rgba(255, 255, 255, 0.07);
  --border-specular: rgba(255, 255, 255, 0.12);
  --border-card-hover: rgba(255, 255, 255, 0.18);
  --border-medium: rgba(255, 255, 255, 0.12);
  --border-accent: rgba(229, 9, 20, 0.35);
  --border-cyan: rgba(0, 240, 255, 0.25);

  /* --- Typography Families --- */
  --font-display: 'Anton', sans-serif;
  --font-heading: 'Syne', sans-serif;
  --font-sans: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
  --font-script: 'Caveat', cursive, serif;
  --font-quote: 'Cormorant Garamond', 'Cinzel', Georgia, serif;

  /* --- Spacing System --- */
  --space-xs: 0.25rem;  /* 4px */
  --space-sm: 0.5rem;   /* 8px */
  --space-md: 1rem;     /* 16px */
  --space-lg: 1.5rem;   /* 24px */
  --space-xl: 2rem;     /* 32px */
  --space-2xl: 3rem;    /* 48px */
  --space-3xl: 4.5rem;  /* 72px */
  --space-4xl: 6.5rem;  /* 104px */
  --space-5xl: 8.5rem;  /* 136px */

  /* --- Shadows & Calibrated Atmospheric Glows --- */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.5);
  --shadow-md: 0 10px 25px rgba(0, 0, 0, 0.7);
  --shadow-lg: 0 20px 40px rgba(0, 0, 0, 0.85);
  --glow-crimson: 0 0 24px rgba(229, 9, 20, 0.22);
  --glow-cyan: 0 0 20px rgba(0, 240, 255, 0.18);

  /* --- Transitions & Timing Curves --- */
  --ease-silk: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.15);
  --transition-fast: 150ms var(--ease-silk);
  --transition-base: 250ms var(--ease-silk);
  --transition-smooth: 500ms var(--ease-silk);
  --transition-spring: 350ms var(--ease-spring);

  /* --- Safe Area Insets --- */
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}