/* BLUN Design Tokens — 1 Suppe, eine Quelle fuer alle Pages.
   Edit here ⇒ all 21 pages update. Do NOT override these in pages. */

@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');
@import url('./mobile-fixes.css');

:root{
  /* Theme primitives */
  --theme-bg-light: oklch(0.965 0.008 75);
  --theme-bg-dark: hsl(225 28% 7%);
  --theme-bg-dark-deep: hsl(220 32% 5%);
  --theme-cyan: #22D3EE;
  --theme-blun-blue: #2b6cff;
  --theme-blun-blue-bright: #5b8dff;
  /* Iter15.99ad light-softer — Mayk: zu sichtbarer Streifen oben, will subtiler */ --page-bg: radial-gradient(ellipse at 20% 20%, rgba(43,108,255,0.06), transparent 70%),
             radial-gradient(ellipse at 80% 60%, rgba(91,141,255,0.04), transparent 75%),
             var(--bg);

  /* Surface / ink */
  --bg:          oklch(0.965 0.008 75);
  --bg-soft:     oklch(0.985 0.005 75);
  --bg-inv:      oklch(0.18  0.02  280);
  --ink:         oklch(0.18  0.02  280);
  --ink-2:       oklch(0.36  0.018 280);
  --ink-3:       oklch(0.55  0.012 280);
  --ink-4:       oklch(0.72  0.008 280);
  --ink-on-inv:  oklch(0.96  0.005 280);
  --surface:     oklch(0.99  0.003 75);
  --line:        oklch(0.18  0.02  280 / 0.10);
  --line-soft:   oklch(0.18  0.02  280 / 0.05);
  --line-strong: oklch(0.18  0.02  280 / 0.16);

  /* Brand / accent */
  --accent:      oklch(0.55 0.18 268);
  --accent-ink:  oklch(0.40 0.18 268);
  --accent-soft: oklch(0.93 0.04 268);
  --accent-hot:  oklch(0.62 0.22 268);

  /* Product hues (for tags, badges, hero icons) */
  --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 (subtle, tinted toward brand) */
  --sh-1: 0 1px 2px oklch(0.3 0.03 280 / .06);
  --sh-2: 0 6px 20px oklch(0.3 0.03 280 / .08);
  --sh-3: 0 20px 60px oklch(0.3 0.03 280 / .12);

  /* 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"]{
  color-scheme: dark;
  --page-bg: /* Iter15.99af kill-dark-gradient — Mayk: kein Streifen mehr, body solid */ var(--theme-bg-dark);
  --bg: var(--theme-bg-dark);
  --bg-soft: hsl(222 27% 10%);
  --bg-inv: hsl(220 32% 4%);
  --ink: oklch(0.96 0.006 230);
  --ink-2: oklch(0.82 0.014 230);
  --ink-3: oklch(0.66 0.018 230);
  --ink-4: oklch(0.50 0.018 230);
  --ink-on-inv: oklch(0.98 0.004 230);
  --surface: hsl(224 25% 12%);
  --line: oklch(0.92 0.015 230 / 0.14);
  --line-soft: oklch(0.92 0.015 230 / 0.08);
  --line-strong: oklch(0.92 0.015 230 / 0.24);
  --accent: var(--theme-blun-blue);
  --accent-ink: var(--theme-blun-blue-bright);
  --accent-soft: rgba(43, 108, 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);
}

/* 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, stop body-gradient bleed above nav */
html { background: var(--bg, var(--theme-bg-dark, #0d1018)); }