/* Design Tokens — Stromvergleich Nürnberg "Fränkisch Direkt" */
/* Basiert auf dem Klarer-Strom-System; Nürnberg bekommt eigene Akzentfarben */
/* Primär: Franken-Burgund #7B2D3E, Sekundär: Hopfen-Gold #E8A020, Dunkel: Schiefer #1A2535 */

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

:root {
  /* ── Brand Colors — Nürnberg "Fränkisch Direkt" ── */
  --green-050: #fdf2f4;
  --green-100: #f9d6dc;
  --green-200: #f0a0b0;
  --green-300: #e06a82;
  --green-400: #c93e5a;
  --green-500: #a82040;  /* Burgund Mitte */
  --green-600: #8f1832;
  --green-700: #7B2D3E;  /* Primär: Franken-Burgund */
  --green-800: #611525;
  --green-900: #480e1a;

  /* Volt-Akzent → Hopfen-Gold */
  --volt-300: #f5d080;
  --volt-400: #f0b83a;
  --volt-500: #E8A020;  /* Hopfen-Gold Haupt-Akzent */
  --volt-600: #c8861a;
  --volt-700: #a86c14;

  /* Dunkel → Schiefer (Nürnberger Stein) */
  --navy-600: #2a3a52;
  --navy-700: #1f2d42;
  --navy-800: #1A2535;  /* Primär-Dunkel */
  --navy-900: #10182a;

  /* Elbe → Pegnitz Blau */
  --elbe-500: #2e7db8;
  --elbe-200: #b8d9ef;

  /* Neutrals */
  --neutral-050: #f8f6f4;
  --neutral-100: #f0ece8;
  --neutral-200: #e2dbd6;
  --neutral-300: #c5bbb4;
  --neutral-400: #9e9089;
  --neutral-500: #7a6e69;
  --neutral-600: #5e5450;
  --neutral-700: #453c39;
  --neutral-800: #2e2724;
  --neutral-900: #1a1512;

  /* Semantic */
  --success:  #1a7a4a;
  --warning:  #c47a1a;
  --error:    #c4201a;
  --info:     --elbe-500;

  /* ── Role tokens ── */
  --bg:       #F6F4F2;      /* Nürnberg: warmes Off-White statt kühles */
  --surface:  #FFFFFF;
  --surface-2:#faf8f5;
  --border:   #E0D8D3;
  --fg1:      #1A1512;
  --fg2:      #453c39;
  --fg3:      #7a6e69;
  --primary:          var(--green-700);
  --primary-hover:    var(--green-800);
  --primary-active:   var(--green-900);
  --accent:           var(--volt-500);
  --accent-strong:    var(--volt-600);
  --dark-surface:     var(--navy-800);
  --dark-fg:          #F6F4F2;

  /* ── Typography ── */
  --font-display: 'Bricolage Grotesque', system-ui, sans-serif;
  --font-body:    'Hanken Grotesk', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', 'Fira Mono', monospace;

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

  /* ── Spacing ── */
  --s-1: 0.25rem; --s-2: 0.5rem; --s-3: 0.75rem; --s-4: 1rem;
  --s-5: 1.25rem; --s-6: 1.5rem; --s-7: 2rem; --s-8: 2.5rem;
  --s-9: 3rem; --s-10: 4rem; --s-11: 5rem; --s-12: 6rem;

  /* ── Layout ── */
  --container: 1200px;
  --wrap-px: clamp(1rem, 4vw, 2.5rem);

  /* ── Radii ── */
  --radius-sm:  8px;
  --radius-md:  14px;
  --radius-lg:  20px;
  --radius-xl:  28px;
  --radius-full: 9999px;

  /* ── Shadows ── */
  --shadow-xs:  0 1px 3px rgba(26,37,53,.06), 0 1px 2px rgba(26,37,53,.04);
  --shadow-sm:  0 2px 8px rgba(26,37,53,.08), 0 1px 4px rgba(26,37,53,.06);
  --shadow-md:  0 4px 16px rgba(26,37,53,.10), 0 2px 8px rgba(26,37,53,.08);
  --shadow-lg:  0 8px 32px rgba(26,37,53,.12), 0 4px 16px rgba(26,37,53,.08);
  --shadow-xl:  0 16px 48px rgba(26,37,53,.14), 0 8px 24px rgba(26,37,53,.10);
  --shadow-primary: 0 4px 16px rgba(123,45,62,.30);
  --shadow-volt:    0 4px 16px rgba(232,160,32,.40);

  /* ── Motion ── */
  --dur: 200ms;
  --ease-out: cubic-bezier(.22, 1, .36, 1);
}