/* ============================================================
   Blue-Radio-Balboa — Design-Tokens
   Portiert aus dem Design-System (electric purple · graphite).
   Selbst-gehostete Fonts optional in /assets/fonts hinterlegen
   und die @import-Zeilen ersetzen, falls die Lizenz es verlangt.
   ============================================================ */

@import url('https://api.fontshare.com/v2/css?f[]=clash-display@400,500,600,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400&family=IBM+Plex+Mono:wght@400;500;600&family=Space+Grotesk:wght@400;500;600;700&display=swap');

:root {
  --purple-50:  #F4EEFF;
  --purple-100: #E7DBFF;
  --purple-200: #CFB6FF;
  --purple-300: #B488FF;
  --purple-400: #9D5BFF;
  --purple-500: #8B2FF5;
  --purple-600: #7A1FE0;
  --purple-700: #6416BE;
  --purple-800: #4D1093;
  --purple-900: #360A68;
  --purple-950: #23064A;

  --magenta-500: #C026D3;
  --magenta-400: #E040FB;
  --brand-blue:  #3B6DFF;

  --grey-0:   #FFFFFF;
  --grey-25:  #FBFBFD;
  --grey-50:  #F6F6F9;
  --grey-100: #EFEFF3;
  --grey-200: #E2E2EA;
  --grey-300: #CCCCD7;
  --grey-400: #9E9EAE;
  --grey-500: #71717F;
  --grey-600: #54545F;
  --grey-700: #3B3B45;
  --grey-800: #26262E;
  --grey-850: #1B1B22;
  --grey-900: #131318;
  --grey-950: #0C0C10;
  --black:    #08080B;

  --success-500: #22C55E;
  --warning-500: #F5A623;
  --danger-500:  #F2415A;
  --info-500:    #3B9EFF;

  --grad-brand: linear-gradient(120deg, var(--brand-blue) 0%, var(--purple-500) 100%);
  --glow-brand: 0 0 32px -8px rgba(91, 77, 255, .7);

  --font-display:     'Clash Display', 'Space Grotesk', 'Segoe UI', system-ui, sans-serif;
  --font-display-alt: 'Space Grotesk', system-ui, sans-serif;
  --font-body:        'IBM Plex Sans', system-ui, -apple-system, sans-serif;
  --font-mono:        'IBM Plex Mono', 'SF Mono', ui-monospace, monospace;

  --text-xs: 12px;   --text-sm: 14px;  --text-base: 16px; --text-md: 18px;
  --text-lg: 20px;   --text-xl: 24px;  --text-2xl: 30px;  --text-3xl: 38px;
  --text-4xl: 48px;  --text-5xl: 62px; --text-6xl: 80px;

  --leading-tight: 1.05; --leading-snug: 1.2; --leading-normal: 1.5; --leading-relaxed: 1.65;
  --tracking-tighter: -0.03em; --tracking-tight: -0.015em; --tracking-caps: 0.08em;
  --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700;

  --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px; --radius-xl: 20px; --radius-pill: 999px;

  --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;

  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --dur-fast: 120ms; --dur-med: 220ms; --dur-slow: 400ms;

  /* ---- Dark theme (die Website) ---- */
  --bg:        var(--black);
  --bg-elev:   var(--grey-950);
  --surface:   var(--grey-900);
  --border:    #25252F;
  --border-strong: #34343F;
  --hairline:  var(--grey-850);

  --fg:   #EDEDF2;
  --fg-2: #A8A8B6;
  --fg-3: #717180;
  --fg-4: var(--grey-600);

  --accent:        var(--purple-400);
  --accent-strong: var(--purple-500);
  --accent-text:   var(--purple-200);
  --accent-tint:   rgba(139, 47, 245, .12);
  --accent-tint-strong: rgba(139, 47, 245, .22);
  --accent-border: rgba(139, 47, 245, .5);
  --ring: rgba(139, 47, 245, .25);
}