/* ==========================================================================
   DESIGN TOKENS - KINETIC BRUTALISM DKV PORTFOLIO
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=IBM+Plex+Mono:ital,wght@0,400;0,500;0,600;1,400&family=Inter:wght@300;400;500;600&display=swap');

:root {
  /* Color Palette - Strict Kinetic Brutalism */
  --paper: #FAFAF8;
  --ink: #0A0A0A;
  --red: #FF2D2D;
  
  /* Derived & Utility Colors */
  --grid-line: rgba(10, 10, 10, 0.08);
  --grid-line-accent: rgba(255, 45, 45, 0.2);
  --border-color: #0A0A0A;
  --paper-translucent: rgba(250, 250, 248, 0.92);
  --ink-subtle: rgba(10, 10, 10, 0.65);
  --ink-muted: rgba(10, 10, 10, 0.4);

  /* Typography Families */
  --font-display: 'Archivo Black', -apple-system, sans-serif;
  --font-body: 'Inter', -apple-system, sans-serif;
  --font-mono: 'IBM Plex Mono', monospace;

  /* Typography Scales (Fluid clamp) */
  --font-hero: clamp(2.75rem, 7.5vw, 6.75rem);
  --font-h1: clamp(2.25rem, 5.5vw, 4.75rem);
  --font-h2: clamp(1.85rem, 4vw, 3.5rem);
  --font-h3: clamp(1.25rem, 2.2vw, 2.25rem);
  --font-body-lg: clamp(1.05rem, 1.4vw, 1.35rem);
  --font-body-base: clamp(0.95rem, 1.1vw, 1.05rem);
  --font-mono-base: clamp(0.8rem, 0.95vw, 0.95rem);
  --font-mono-sm: clamp(0.7rem, 0.8vw, 0.85rem);

  /* Spacing System (Fluid clamp & rem) */
  --space-3xs: clamp(0.25rem, 0.5vw, 0.375rem);
  --space-2xs: clamp(0.5rem, 0.8vw, 0.75rem);
  --space-xs: clamp(0.75rem, 1.2vw, 1rem);
  --space-sm: clamp(1rem, 1.8vw, 1.5rem);
  --space-md: clamp(1.5rem, 2.5vw, 2.5rem);
  --space-lg: clamp(2.5rem, 4vw, 4rem);
  --space-xl: clamp(4rem, 7vw, 7rem);
  --space-2xl: clamp(6rem, 10vw, 10rem);

  /* Layout Boundaries */
  --container-max: 1520px;
  --header-height: clamp(60px, 8vh, 80px);
  --grid-columns: 12;
  --hairline-width: 1px;

  /* Motion & Timing Variables */
  --ease-brutal: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-fast: cubic-bezier(0.25, 1, 0.5, 1);
  --transition-fast: 150ms var(--ease-out-fast);
  --transition-medium: 300ms var(--ease-brutal);
  --transition-slow: 600ms var(--ease-brutal);

  /* Strict Zero Radius Rule */
  --radius-none: 0px;

  /* Z-Index Layers */
  --z-background: 0;
  --z-grid-lines: 10;
  --z-content: 20;
  --z-header: 100;
  --z-cursor: 9999;
}