/* ============================================================
   wAIser.dev — DESIGN TOKENS
   Blackwall design system · single source of truth
   ------------------------------------------------------------
   Layer 1  PRIMITIVES  — raw values, never used directly in UI
   Layer 2  SEMANTIC    — role-based aliases used by components
   Layer 3  COMPONENT   — component-scoped tokens
   Load this BEFORE blackwall.css.
   ============================================================ */

/* ============================================================
   SELF-HOSTED FONTS (no Google CDN — GDPR + perf)
   Root-absolute /fonts/ paths so one rule serves every depth
   (homepage, /blog/, /blog/posts/de/ …). woff2 only.
   ============================================================ */
@font-face{font-family:"Chakra Petch";font-weight:400;font-style:normal;font-display:swap;src:url("/fonts/ChakraPetch-Regular.woff2") format("woff2");}
@font-face{font-family:"Chakra Petch";font-weight:500;font-style:normal;font-display:swap;src:url("/fonts/ChakraPetch-Medium.woff2") format("woff2");}
@font-face{font-family:"Chakra Petch";font-weight:600;font-style:normal;font-display:swap;src:url("/fonts/ChakraPetch-SemiBold.woff2") format("woff2");}
@font-face{font-family:"Chakra Petch";font-weight:700;font-style:normal;font-display:swap;src:url("/fonts/ChakraPetch-Bold.woff2") format("woff2");}
@font-face{font-family:"Space Grotesk";font-weight:400;font-style:normal;font-display:swap;src:url("/fonts/SpaceGrotesk-Regular.woff2") format("woff2");}
@font-face{font-family:"Space Grotesk";font-weight:500;font-style:normal;font-display:swap;src:url("/fonts/SpaceGrotesk-Medium.woff2") format("woff2");}
@font-face{font-family:"Space Grotesk";font-weight:700;font-style:normal;font-display:swap;src:url("/fonts/SpaceGrotesk-Bold.woff2") format("woff2");}
@font-face{font-family:"Space Mono";font-weight:400;font-style:normal;font-display:swap;src:url("/fonts/SpaceMono-Regular.woff2") format("woff2");}
@font-face{font-family:"Space Mono";font-weight:700;font-style:normal;font-display:swap;src:url("/fonts/SpaceMono-Bold.woff2") format("woff2");}

:root {
  /* ========================================================
     LAYER 1 · PRIMITIVES
     ======================================================== */

  /* --- Brand red ramp --- */
  --red-50:  #fff0f1;
  --red-100: #ffd6da;
  --red-200: #ffa3ac;
  --red-300: #ff6d7b;
  --red-400: #ff5a68;   /* hot */
  --red-500: #ff2a3c;   /* core brand */
  --red-600: #e11d2a;
  --red-700: #b3121d;
  --red-800: #8f0d18;
  --red-900: #5c060d;

  /* --- Neutral (ink) ramp --- */
  --ink-0:   #050507;   /* page bg */
  --ink-50:  #08080a;
  --ink-100: #0a0b0f;   /* surface / nav */
  --ink-200: #0d0e13;   /* raised surface */
  --ink-300: #14161d;
  --ink-400: #1c1f28;
  --ink-500: #2a2d38;
  --ink-600: #3a3d48;
  --ink-700: #5a5d69;
  --ink-800: #8a8d99;   /* muted text */
  --ink-900: #b6b6bc;
  --ink-950: #e8e8ec;
  --ink-1000:#ffffff;

  /* --- Accents --- */
  --cyan-500:  #2ae0ff;  /* glitch channel */
  --green-500: #3ad17a;  /* success / online */
  --amber-500: #f5a623;  /* moderate / warning */

  /* --- Alpha helpers (built on brand + white) --- */
  --red-a06:  rgba(255,42,60,.06);
  --red-a10:  rgba(255,42,60,.10);
  --red-a16:  rgba(255,42,60,.16);
  --red-a25:  rgba(255,42,60,.25);
  --red-a35:  rgba(255,42,60,.35);
  --red-a50:  rgba(255,42,60,.50);
  --white-a04: rgba(255,255,255,.04);
  --white-a06: rgba(255,255,255,.06);
  --white-a08: rgba(255,255,255,.08);
  --white-a10: rgba(255,255,255,.10);

  /* --- Type families --- */
  --font-display: "Chakra Petch", "Arial Black", sans-serif;  /* headings, wordmark */
  --font-body:    "Space Grotesk", system-ui, sans-serif;     /* prose, UI */
  --font-mono:    "Space Mono", ui-monospace, monospace;      /* labels, code, terminal */

  /* --- Type scale (fluid, clamp-based) --- */
  --text-2xs: 10.5px;
  --text-xs:  12px;
  --text-sm:  13.5px;
  --text-base:16px;
  --text-md:  clamp(16px, 1.8vw, 19px);
  --text-lg:  clamp(18px, 2.2vw, 22px);
  --text-xl:  clamp(20px, 2.6vw, 26px);
  --text-2xl: clamp(24px, 3.2vw, 34px);
  --text-3xl: clamp(28px, 3.6vw, 44px);
  --text-4xl: clamp(30px, 4.6vw, 58px);
  --text-5xl: clamp(40px, 6.5vw, 84px);
  --text-6xl: clamp(60px, 13vw, 180px);   /* hero wordmark */

  /* --- Font weights --- */
  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semibold:600;
  --fw-bold:    700;

  /* --- Letter spacing --- */
  --tracking-tight:  -0.015em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;
  --tracking-wider:  0.08em;
  --tracking-mono:   0.14em;   /* mono labels */
  --tracking-caps:   0.24em;   /* eyebrow / kicker */

  /* --- Line heights --- */
  --leading-none:  0.88;
  --leading-tight: 1.05;
  --leading-snug:  1.28;
  --leading-normal:1.6;
  --leading-relaxed:1.78;

  /* --- Spacing scale (4px base) --- */
  --space-0:  0;
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;
  /* viewport-rhythm section padding */
  --space-section:   16vh;
  --space-section-sm: 8vh;

  /* --- Radii --- */
  --radius-xs:  2px;
  --radius-sm:  5px;
  --radius-md:  8px;
  --radius-lg:  12px;
  --radius-xl:  16px;
  --radius-pill:999px;
  --radius-circle:50%;
  /* signature clipped-corner (Cyberpunk cut) */
  --clip-cut: polygon(0 0, 100% 0, 100% 72%, 92% 100%, 0 100%);

  /* --- Borders --- */
  --border-hairline: 1px solid var(--white-a08);
  --border-red:      1px solid var(--red-a35);
  --border-width:    1px;
  --border-width-2:  2px;

  /* --- Shadows --- */
  --shadow-sm:  0 10px 30px rgba(0,0,0,.4);
  --shadow-md:  0 22px 44px rgba(0,0,0,.5);
  --shadow-lg:  0 40px 90px rgba(0,0,0,.6);
  --shadow-inset:inset 0 0 40px rgba(0,0,0,.6);

  /* --- Glows (red neon) --- */
  --glow-xs: 0 0 8px var(--red-500);
  --glow-sm: 0 0 16px rgba(255,42,60,.5);
  --glow-md: 0 0 30px rgba(255,42,60,.4);
  --glow-lg: 0 0 44px rgba(255,42,60,.6);
  --glow-text: 0 0 30px rgba(255,42,60,.4);
  --glow-text-strong: 0 0 40px rgba(255,42,60,.8);

  /* --- Motion --- */
  --ease-out:   cubic-bezier(.2,.8,.2,1);
  --ease-in-out:cubic-bezier(.4,0,.2,1);
  --ease-snap:  cubic-bezier(.3,.8,.3,1);
  --dur-fast:   .2s;
  --dur-base:   .3s;
  --dur-slow:   .5s;
  --dur-slower: .9s;
  --dur-glitch: .8s;

  /* --- Z-index scale --- */
  --z-base:     2;
  --z-overlay:  60;
  --z-hud:      70;
  --z-nav:      75;
  --z-drawer:   79;
  --z-progress: 80;
  --z-burger:   82;

  /* --- Layout --- */
  --container:      1200px;
  --container-wide: 1240px;
  --container-prose:720px;
  --gutter: var(--space-10);
  --nav-height: 70px;

  /* ========================================================
     LAYER 2 · SEMANTIC ALIASES
     (what components actually reference)
     ======================================================== */
  --color-bg:            var(--ink-0);
  --color-surface:       var(--ink-200);
  --color-surface-raised:var(--ink-300);
  --color-nav:           var(--ink-100);
  --color-text:          #f4f4f5;
  --color-text-strong:   var(--ink-1000);
  --color-text-muted:    var(--ink-800);
  --color-text-subtle:   var(--ink-700);
  --color-heading:       var(--ink-1000);

  --color-brand:         var(--red-500);
  --color-brand-hover:   var(--red-400);
  --color-brand-deep:    var(--red-800);
  --color-on-brand:      var(--ink-0);
  --color-accent-cyan:   var(--cyan-500);
  --color-success:       var(--green-500);
  --color-warning:       var(--amber-500);

  --color-border:        var(--white-a08);
  --color-border-strong: var(--red-a35);
  --color-focus:         var(--red-500);

  --surface-input:       var(--white-a04);
  --surface-hover:       var(--white-a06);

  /* threat semantics (blog/security) */
  --threat-critical: var(--red-500);
  --threat-moderate: var(--amber-500);
  --threat-low:      var(--ink-700);

  /* ========================================================
     LAYER 3 · BACK-COMPAT ALIASES
     Legacy shorthand vars used across the codebase — mapped
     onto the new tokens so nothing has to be rewritten.
     ======================================================== */
  --red:   var(--red-500);
  --hot:   var(--red-400);
  --ice:   var(--cyan-500);
  --bg:    var(--ink-0);
  --surf:  var(--ink-200);
  --line:  var(--white-a08);
  --mut:   var(--ink-800);
}

/* Reduced-motion: collapse durations globally at the token layer */
@media (prefers-reduced-motion: reduce){
  :root{
    --dur-fast:.01ms; --dur-base:.01ms; --dur-slow:.01ms; --dur-slower:.01ms; --dur-glitch:.01ms;
  }
}