/* BLUN Design Tokens — 1 Suppe, eine Quelle fuer alle Pages.
   Edit here ⇒ all 21 pages update. Do NOT override these in pages.
   Iter16.00b (Alfred 2026-08-07) — BLUN-Code-Schwarz als kanonischer Dark-Only-Stand.
   Mayk-Direktive: schwarzer Body und dieselbe Schwarz/Blau-Familie auf allen BLUN-Flächen. */

@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,200..800&family=Hanken+Grotesk:wght@300..800&family=JetBrains+Mono:wght@400;500;700&display=swap');
/* mobile-fixes.css wird seit 09.08. versioniert per <link> im server-Inject eingebunden (vorher: @import ohne Cache-Buster) */

:root{
  color-scheme: dark;

  /* Theme primitives */
  --theme-bg-light: oklch(0.965 0.008 75);
  --theme-bg-dark: #050506;
  --theme-bg-dark-deep: #020203;
  --theme-cyan: #22D3EE;
  --theme-blun-blue: #0163ff;
  --theme-blun-blue-bright: #0152d6;

  /* Page background — solid BLUN-Code black, no gradient. */
  --page-bg: var(--theme-bg-dark);

  /* Surface / ink — DARK-ONLY DEFAULTS */
  --bg:          #050506;
  --bg-soft:     #0a0b0e;
  --bg-inv:      #020203;
  --ink:         #f5f7fb;
  --ink-2:       #c4c9d4;
  --ink-3:       #858c9b;
  --ink-4:       #5c6370;
  --ink-on-inv:  #ffffff;
  --surface:     #101217;
  --line:        rgba(255,255,255,.12);
  --line-soft:   rgba(255,255,255,.075);
  --line-strong: rgba(255,255,255,.22);

  /* Brand / accent */
  --accent:      #0163ff;
  --accent-ink:  #0152d6;
  --accent-soft: rgba(1, 99, 255, 0.16);
  --accent-hot:  #0152d6;

  /* Product hues (for tags, badges, hero icons) — kept as-is, work on dark */
  --p-king:    oklch(0.55 0.18 268);
  --p-queen:   oklch(0.62 0.16 340);
  --p-prince:  oklch(0.60 0.16 220);
  --p-voice:   oklch(0.65 0.14 150);
  --p-imagine: oklch(0.65 0.17  40);
  --p-agents:  oklch(0.55 0.15  95);
  --p-mcp:     oklch(0.55 0.12 200);
  --p-api:     oklch(0.50 0.16 310);
  --p-code:    oklch(0.45 0.14 260);
  --p-chat:    oklch(0.56 0.16 265);
  --p-websites:oklch(0.62 0.14 185);
  --p-apps:    oklch(0.58 0.16 120);
  --p-software:oklch(0.54 0.15 245);

  /* Semantic */
  --ok:     oklch(0.60 0.14 150);
  --warn:   oklch(0.72 0.16  70);
  --danger: oklch(0.58 0.22  25);

  /* Spacing scale — 4pt */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
  --space-9:  96px;
  --space-10:128px;

  /* Radii */
  --r-1: 4px;
  --r-2: 8px;
  --r-3: 12px;
  --r-4: 18px;
  --r-5: 24px;
  --r-pill: 999px;

  /* Shadows — dark-tuned */
  --sh-1: 0 1px 2px rgba(0,0,0,.32);
  --sh-2: 0 8px 28px rgba(0,0,0,.36);
  --sh-3: 0 28px 80px rgba(0,0,0,.44);

  /* Typography */
  --font-display: 'Bricolage Grotesque', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-body:    'Hanken Grotesk',    ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  --fs-display: clamp(2.6rem, 5.6vw, 4.4rem);
  --fs-h1:      clamp(2.0rem, 4.4vw, 3.2rem);
  --fs-h2:      clamp(1.5rem, 2.6vw, 2.2rem);
  --fs-h3:      clamp(1.2rem, 1.8vw, 1.5rem);
  --fs-body:    1rem;
  --fs-sm:      .92rem;
  --fs-xs:      .78rem;
  --fs-eyebrow: .72rem;

  /* Layout */
  --max-w:        1280px;
  --max-w-narrow: 980px;
  --gutter:       clamp(16px, 4vw, 48px);
  --nav-h:        72px;
}

/* [data-theme="dark"] kept as no-op for backward compat: any existing data-theme=dark hooks resolve identically to :root now. */
[data-theme="dark"]{
  color-scheme: dark;
  --page-bg: var(--theme-bg-dark);
  --bg: #050506;
  --bg-soft: #0a0b0e;
  --bg-inv: #020203;
  --ink: #f5f7fb;
  --ink-2: #c4c9d4;
  --ink-3: #858c9b;
  --ink-4: #5c6370;
  --ink-on-inv: #ffffff;
  --surface: #101217;
  --line: rgba(255,255,255,.12);
  --line-soft: rgba(255,255,255,.075);
  --line-strong: rgba(255,255,255,.22);
  --accent: var(--theme-blun-blue);
  --accent-ink: var(--theme-blun-blue-bright);
  --accent-soft: rgba(1, 99, 255, 0.16);
  --accent-hot: var(--theme-blun-blue-bright);
  --sh-1: 0 1px 2px rgba(0,0,0,.32);
  --sh-2: 0 8px 28px rgba(0,0,0,.36);
  --sh-3: 0 28px 80px rgba(0,0,0,.44);
}

/* [data-theme="light"] explicitly neutralised — any leftover hooks render dark anyway. */
[data-theme="light"]{
  color-scheme: dark;
  --bg: #050506;
  --page-bg: var(--theme-bg-dark);
}

/* Reset basics */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;overflow-x:clip}
body{overflow-x:clip}
body{
  margin:0;
  background:var(--page-bg, var(--bg));
  background-attachment:fixed;
  color:var(--ink);
  font-family:var(--font-body);
  font-size:var(--fs-body);
  line-height:1.55;
  font-feature-settings:"ss01","cv11";
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:700;letter-spacing:-.02em;line-height:1.1;margin:0}
p{margin:0 0 var(--space-4)}
a{color:inherit;text-decoration:none}
img,svg,video{max-width:100%;display:block}
button{font:inherit;color:inherit;cursor:pointer}
::selection{background:var(--accent);color:#fff}

/* Iter15.99z mobile-top-cover — paint iOS safe-area-top in solid theme bg */
html { background: var(--bg, var(--theme-bg-dark, #050506)); }