/* 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{
  /* 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);

  /* 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;
}

/* 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(--bg);
  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}