/* ============================================================
   Bezirksimkerverein Rastatt — Design Tokens
   colors_and_type.css
   ------------------------------------------------------------
   Wabe · Wiese · Wärme
   ============================================================ */

/* ============================================================
   Webfonts — DSGVO-konform
   ------------------------------------------------------------
   Google Fonts dürfen in Deutschland NICHT direkt von Google
   geladen werden (LG München I, Az. 3 O 17493/20, 20.01.2022).
   Wir nutzen daher zwei Stufen:

   1. In der Produktion: SELF-HOSTING aus dem ./fonts/-Verzeichnis.
      Dateien (woff2) sind über Bunny Fonts oder Fontsource zu
      beziehen — siehe fonts/README.md.

   2. Für den Prototypen/Design-System-Vorschau: BUNNY FONTS
      (https://fonts.bunny.net) — EU-gehosteter, GDPR-konformer
      1:1-Spiegel ohne Tracking und Logs.

   Die @font-face-Regeln unten greifen lokale Dateien an;
   das @import lädt als Fallback von Bunny Fonts.
   ============================================================ */

/* (a) Bevorzugt: lokale Dateien (DSGVO-clean, schnellster Load) */
@font-face {
  font-family: "Bricolage Grotesque";
  src: url("fonts/BricolageGrotesque-Variable.woff2") format("woff2-variations");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Manrope";
  src: url("fonts/Manrope-Variable.woff2") format("woff2-variations");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("fonts/JetBrainsMono-Variable.woff2") format("woff2-variations");
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
}

/* (b) Fallback / Prototyp: Bunny Fonts (EU, DSGVO-konform).
       In der Produktion auskommentieren, sobald die lokalen
       woff2-Dateien deployed sind. */
@import url("https://fonts.bunny.net/css?family=bricolage-grotesque:400,500,600,700|manrope:400,500,600,700|jetbrains-mono:400,500,600&display=swap");

:root {
  /* ============================================================
     1. RAW COLOR SCALES
     ============================================================ */

  /* Honey — primary, golden honey */
  --honey-50:  #FDF6E3;
  --honey-100: #FBEBC1;
  --honey-200: #F7D98A;
  --honey-300: #F2C236;   /* pollen-yellow accent */
  --honey-400: #ECB02E;
  --honey-500: #E8A427;   /* PRIMARY brand */
  --honey-600: #C98317;
  --honey-700: #9C620F;
  --honey-800: #6E440A;

  /* Pollen — soft yellow accent (lighter than honey, less saturated) */
  --pollen-50:  #FEF8E0;
  --pollen-100: #FCEEBE;
  --pollen-200: #F9E29B;
  --pollen-300: #F5D78A;
  --pollen-400: #E9C46A;

  /* Wax — deep beeswax brown, used for foreground + dark accent */
  --wax-50:  #F2EAD9;
  --wax-100: #DCC9A6;
  --wax-200: #B69767;
  --wax-300: #8C6A3F;
  --wax-400: #714F2A;
  --wax-500: #5C3A1A;     /* deep wax */
  --wax-600: #482C12;
  --wax-700: #34200C;
  --wax-800: #2C1F11;     /* near-black, primary text */

  /* Meadow — secondary, grass green */
  --meadow-50:  #ECF3E5;
  --meadow-100: #D2E2BD;
  --meadow-200: #A9C887;
  --meadow-300: #82AE5C;
  --meadow-400: #659540;
  --meadow-500: #527D32;
  --meadow-600: #4A7A3A;  /* SECONDARY brand */
  --meadow-700: #345A26;
  --meadow-800: #243F1A;

  /* Cream — warm off-whites; the "paper" of the system */
  --cream-50:  #FBF6EC;   /* page background */
  --cream-100: #F6EFDD;   /* alt section background */
  --cream-150: #F1E7CC;   /* divider tint */

  /* Warm neutral grays (slightly yellow-shifted) */
  --neutral-0:   #FFFFFF;
  --neutral-50:  #F9F5EB;
  --neutral-100: #EFE7D3;
  --neutral-200: #E1D5BA;
  --neutral-300: #C8B894;
  --neutral-400: #9B8763;
  --neutral-500: #756242;
  --neutral-600: #574A33;
  --neutral-700: #3D331F;
  --neutral-800: #2C1F11;

  /* ============================================================
     2. SEMANTIC COLOR TOKENS
     ============================================================ */

  /* Surfaces */
  --bg-page:        var(--cream-50);
  --bg-section-alt: var(--cream-100);
  --surface-0:      var(--neutral-0);
  --surface-1:      var(--cream-50);
  --surface-sunk:   var(--cream-100);

  /* Foreground */
  --fg-1: var(--wax-800);          /* primary text */
  --fg-2: #604A30;                  /* secondary text */
  --fg-3: #8E764F;                  /* tertiary / muted */
  --fg-on-dark:  var(--cream-50);   /* text on wax background */
  --fg-on-honey: var(--wax-800);    /* text on honey background */

  /* Borders */
  --border-1: #EBE1CC;
  --border-2: #F0E7D3;
  --border-strong: var(--wax-300);

  /* Brand */
  --brand-primary:    var(--honey-500);
  --brand-primary-hover: var(--honey-600);
  --brand-secondary:  var(--meadow-600);
  --brand-accent:     var(--pollen-300);
  --brand-ink:        var(--wax-800);

  /* Semantic states */
  --success: var(--meadow-600);
  --success-bg: var(--meadow-50);
  --warning: var(--honey-600);
  --warning-bg: var(--pollen-50);
  --error: #B5331C;                 /* poppy red */
  --error-bg: #FBE4DC;
  --info: #3A6FA0;                  /* cornflower blue */
  --info-bg: #E1ECF6;

  /* Queen-marking years (international standard) */
  --queen-red:   #C8332B;   /* years ending 3 or 8 */
  --queen-green: #4A7A3A;   /* years ending 4 or 9 */
  --queen-blue:  #2E5BA0;   /* years ending 5 or 0 */
  --queen-white: #F5F1E6;   /* years ending 6 or 1 — needs outline */
  --queen-yellow:#F2C236;   /* years ending 7 or 2 */

  /* Focus */
  --focus-ring: 0 0 0 2px var(--cream-50), 0 0 0 4px var(--honey-500);

  /* ============================================================
     3. TYPOGRAPHY
     ============================================================ */

  --font-display: "Bricolage Grotesque", "Iowan Old Style", "Palatino", Georgia, serif;
  --font-body:    "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono:    "JetBrains Mono", "SFMono-Regular", Consolas, monospace;

  /* Type scale */
  --text-xs:   12px;
  --text-sm:   14px;
  --text-md:   17px;     /* default body */
  --text-lg:   19px;
  --text-xl:   22px;
  --text-2xl:  28px;
  --text-3xl:  34px;
  --text-4xl:  44px;
  --text-5xl:  56px;
  --display-xl: 72px;

  /* Line heights */
  --lh-tight:  1.12;
  --lh-snug:   1.25;
  --lh-normal: 1.5;
  --lh-loose:  1.65;

  /* Weights */
  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semibold:600;
  --fw-bold:    700;

  /* Tracking */
  --track-tight:  -0.018em;
  --track-normal: 0;
  --track-wide:   0.04em;

  /* ============================================================
     4. SPACING SCALE
     ============================================================ */
  --space-0:  0;
  --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;

  /* ============================================================
     5. RADII
     ============================================================ */
  --radius-xs:   4px;
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-full: 999px;

  /* ============================================================
     6. SHADOWS (warm, derived from wax)
     ============================================================ */
  --shadow-sm:  0 1px 2px rgba(92, 58, 26, 0.08);
  --shadow-md:  0 4px 16px -2px rgba(92, 58, 26, 0.12);
  --shadow-lg:  0 16px 40px -8px rgba(92, 58, 26, 0.18);
  --shadow-xl:  0 32px 64px -16px rgba(92, 58, 26, 0.24);
  --shadow-inset: inset 0 1px 0 rgba(92, 58, 26, 0.06);

  /* ============================================================
     7. MOTION
     ============================================================ */
  --ease-soft:    cubic-bezier(0.2, 0.0, 0.0, 1.0);
  --ease-out:     cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:  cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:  120ms;
  --dur-base:  200ms;
  --dur-slow:  320ms;

  /* ============================================================
     8. LAYOUT
     ============================================================ */
  --container-text: 720px;
  --container:      1120px;
  --container-wide: 1280px;
  --header-h:        72px;
  --header-h-mobile: 60px;
}

/* ============================================================
   GLOBAL DEFAULTS  (apply when this file is the page baseline)
   ============================================================ */

html {
  font-size: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  font-family: var(--font-body);
  font-size: var(--text-md);
  line-height: var(--lh-normal);
  color: var(--fg-1);
  background: var(--bg-page);
  font-feature-settings: "ss01", "cv01";
}

/* Headings */
h1, h2, h3, h4, h5, h6, .display {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--track-tight);
  line-height: var(--lh-tight);
  text-wrap: balance;
  color: var(--fg-1);
  margin: 0 0 var(--space-3);
}

h1, .h1 { font-size: var(--text-5xl); font-weight: var(--fw-semibold); line-height: 1.05; }
h2, .h2 { font-size: var(--text-4xl); font-weight: var(--fw-semibold); }
h3, .h3 { font-size: var(--text-3xl); font-weight: var(--fw-semibold); }
h4, .h4 { font-size: var(--text-2xl); font-weight: var(--fw-medium); line-height: var(--lh-snug); }
h5, .h5 { font-size: var(--text-xl);  font-weight: var(--fw-medium); line-height: var(--lh-snug); }
h6, .h6 {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--fg-3);
}

p, .body {
  margin: 0 0 var(--space-3);
  text-wrap: pretty;
  line-height: var(--lh-normal);
  max-width: 65ch;
}

.lead {
  font-family: var(--font-display);
  font-weight: var(--fw-regular);
  font-size: var(--text-xl);
  line-height: var(--lh-snug);
  color: var(--fg-2);
}

small, .small { font-size: var(--text-sm); }
.caption {
  font-size: var(--text-xs);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--fg-3);
}

code, kbd, samp, pre, .mono {
  font-family: var(--font-mono);
  font-size: 0.92em;
}

a {
  color: var(--honey-700);
  text-decoration-color: color-mix(in oklab, var(--honey-700) 35%, transparent);
  text-underline-offset: 3px;
  transition: color var(--dur-fast) var(--ease-soft);
}
a:hover { color: var(--honey-600); text-decoration-color: currentColor; }

::selection { background: var(--pollen-300); color: var(--wax-800); }

/* Honeycomb pattern utility — used by hero / section bands */
.bg-honeycomb {
  background-color: var(--cream-50);
  background-image: url("assets/patterns/honeycomb.svg");
  background-size: 88px auto;
  background-repeat: repeat;
}