/* ═══════════════════════════════════════════════════════════════
   DESIGN TOKENS — Stromvergleich Hannover
   Design: "Hannover Klar" — Hannover Blau + Amber Gold
   Distinct from Hamburg (Emerald/Volt), Dortmund (Anthrazit/Gelb)
═══════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,700;12..96,800&family=Hanken+Grotesk:wght@400;500;600&family=JetBrains+Mono:wght@600&display=swap');

:root {
  /* ── Brand Colors ──────────────────────────────── */
  --primary:        #005B8E;   /* Hannover Blau */
  --primary-hover:  #004A75;
  --primary-dark:   #003A5E;
  --primary-light:  #E8F4FC;

  --accent:         #F4B400;   /* Amber Gold */
  --accent-hover:   #DFA200;
  --accent-strong:  #C89100;
  --accent-light:   #FFF8E1;

  --success:        #1E7D48;
  --success-light:  #E6F7EE;
  --danger:         #C62828;

  /* ── Neutrals ──────────────────────────────────── */
  --navy:           #1B2A3A;
  --navy-mid:       #263852;
  --navy-light:     #3D5168;

  --bg:             #F3F7FB;
  --surface:        #FFFFFF;
  --surface-alt:    #EBF2F8;
  --border:         #DDE3EC;
  --border-strong:  #B8C9DC;

  /* ── Typography ────────────────────────────────── */
  --fg1:  #1B2A3A;
  --fg2:  #3D5168;
  --fg3:  #6B84A0;
  --fg4:  #9BB0C9;

  /* ── Font families ─────────────────────────────── */
  --font-display:  'Bricolage Grotesque', system-ui, sans-serif;
  --font-body:     'Hanken Grotesk', system-ui, sans-serif;
  --font-mono:     'JetBrains Mono', 'Courier New', monospace;

  /* ── Type scale ────────────────────────────────── */
  --text-xs:    0.75rem;
  --text-sm:    0.875rem;
  --text-base:  1rem;
  --text-md:    1.125rem;
  --text-lg:    1.25rem;
  --text-xl:    1.5rem;
  --text-2xl:   1.875rem;
  --text-3xl:   2.25rem;
  --text-4xl:   3rem;
  --text-5xl:   3.75rem;

  /* ── Spacing ───────────────────────────────────── */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;

  /* ── Radii ─────────────────────────────────────── */
  --radius-sm:  6px;
  --radius-md:  10px;
  --radius-lg:  16px;
  --radius-xl:  24px;
  --radius-full: 9999px;

  /* ── Shadows ───────────────────────────────────── */
  --shadow-xs:  0 1px 3px rgba(27,42,58,.06);
  --shadow-sm:  0 2px 8px rgba(27,42,58,.08);
  --shadow-md:  0 4px 16px rgba(27,42,58,.10), 0 1px 4px rgba(27,42,58,.06);
  --shadow-lg:  0 8px 32px rgba(27,42,58,.12), 0 2px 8px rgba(27,42,58,.08);
  --shadow-xl:  0 16px 48px rgba(27,42,58,.14);
  --shadow-primary: 0 4px 16px rgba(0,91,142,.28);
  --shadow-accent:  0 4px 16px rgba(244,180,0,.32);

  /* ── Motion ────────────────────────────────────── */
  --dur:    180ms;
  --ease:   cubic-bezier(.25,.46,.45,.94);

  /* ── Layout ────────────────────────────────────── */
  --container: 1200px;
}