/*
 * Recurra Design Tokens — neu erzeugt aus MD3-Palette des Design-Systems (build.mjs)
 * Stand: 2026-08-14
 * Namensschema: --rc-<kategorie> (passend zu Design-System-Variablennamen)
 * Keine externen Ressourcen, kein CDN-Import.
 */

/* ===== SCHRIFTEN LOKAL =====
   Space Grotesk (Ueberschriften) und Manrope (Fliesstext), SIL Open Font
   License 1.1 — Lizenztexte liegen neben den Dateien unter public/fonts/.
   Latin-Subset (U+0000-00FF) deckt deutsche Umlaute und ß bereits ab, daher
   kein zusaetzliches latin-ext noetig. Keine externen Font-Anfragen
   (kein Google-Fonts-Link, kein CDN) — Dateien liegen im eigenen /fonts/.
*/
@font-face {
  font-family: 'Space Grotesk';
  font-style:  normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/space-grotesk/space-grotesk-latin-500-normal.woff2') format('woff2');
}

@font-face {
  font-family: 'Space Grotesk';
  font-style:  normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/space-grotesk/space-grotesk-latin-700-normal.woff2') format('woff2');
}

@font-face {
  font-family: 'Manrope';
  font-style:  normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/manrope/manrope-latin-400-normal.woff2') format('woff2');
}

@font-face {
  font-family: 'Manrope';
  font-style:  normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/manrope/manrope-latin-600-normal.woff2') format('woff2');
}

@font-face {
  font-family: 'Manrope';
  font-style:  normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/manrope/manrope-latin-700-normal.woff2') format('woff2');
}

:root {

  /* ===== MD3 PRIMARY ===== */
  --rc-primary:                   #a90055;   /* 7,19:1 auf Weiß (AAA) — CTA, Hauptakzent, Text freigegeben */
  --rc-primary-container:         #d6006d;   /* 5,08:1 auf Weiß (AA) — dunkle CTA-Fläche */
  --rc-on-primary:                #ffffff;
  --rc-on-primary-container:      #ffecef;
  --rc-inverse-primary:           #ffb1c6;

  /* ===== MD3 SECONDARY / TEAL ===== */
  --rc-secondary:                 #006972;   /* 6,12:1 auf Weiß (AA) — Teal-Akzent, Text freigegeben */
  --rc-secondary-container:       #9ff0fb;
  --rc-on-secondary:              #ffffff;
  --rc-on-secondary-container:    #066f79;
  --rc-secondary-fixed-dim:       #82d3de;

  /* ===== MD3 TERTIARY / GRÜN ===== */
  --rc-tertiary:                  #00631d;   /* 6,96:1 auf Weiß (AA) — Erfolg, Match gewonnen */
  --rc-tertiary-container:        #007f28;
  --rc-on-tertiary:               #ffffff;
  --rc-tertiary-fixed:            #8ffa92;

  /* ===== MD3 SURFACE / FLÄCHEN ===== */
  --rc-surface:                   #f9f9f9;
  --rc-surface-container:         #eeeeee;
  --rc-surface-container-low:     #f3f3f3;
  --rc-surface-container-high:    #e8e8e8;
  --rc-surface-container-highest: #e2e2e2;
  --rc-surface-container-lowest:  #ffffff;
  --rc-surface-dim:               #dadada;
  --rc-on-surface:                #1a1c1c;   /* 18,40:1 auf Weiß (AAA) — Haupttext */
  --rc-on-surface-variant:        #5a3f46;
  --rc-outline:                   #8e6f76;
  --rc-outline-variant:           #e2bdc5;

  /* ===== MD3 ERROR ===== */
  --rc-error:                     #ba1a1a;   /* 6,39:1 auf Weiß (AA) */
  --rc-error-container:           #ffdad6;
  --rc-on-error:                  #ffffff;
  --rc-on-error-container:        #93000a;

  /* ===== MD3 INVERSE (Header, Footer) ===== */
  --rc-inverse-surface:           #2f3131;
  --rc-inverse-on-surface:        #f1f1f1;

  /* ===== MARKEN-FLÄCHEN ===== */
  /* Logo-Pink: NUR als Fläche/Akzent — nie als Textfarbe (Kontrast 3,16:1, nicht WCAG AA) */
  --rc-pink:                      #F9527D;
  --rc-pink-tint:                 rgba(249, 82, 125, 0.10);
  --rc-dark:                      #12222B;   /* auf Pink: 5,27:1 (AA) */

  /* ===== ROLLENFARBEN (Gründer 04.10.2026) =====
     Magenta und Dunkel stehen für Recurra; Spieler = Grün (Tertiary), Verkäufer = Teal (Secondary).
     Beide als Text auf Weiß freigegeben (AA). */
  --rc-rolle-spieler:             #00631d;   /* 6,96:1 auf Weiß */
  --rc-rolle-spieler-tint:        #e6f8e6;
  --rc-rolle-verkaeufer:          #006972;   /* 6,12:1 auf Weiß */
  --rc-rolle-verkaeufer-tint:     #e3f8fa;

  /* ===== SCHATTEN ===== */
  --rc-shadow-card:               0px 20px 40px rgba(26, 28, 28, 0.04);
  --rc-shadow-card-hover:         0px 20px 40px rgba(26, 28, 28, 0.12);
  --rc-shadow-glow-primary:       0 0 15px rgba(169, 0, 85, 0.3);
  --rc-shadow-glow-primary-lg:    0px 10px 30px rgba(169, 0, 85, 0.3);

  /* ===== RADIEN (aus tailwind.config.js des Design-Systems) ===== */
  --r-sm:   2px;
  --r-md:   4px;
  --r-lg:   8px;
  --r-xl:   16px;
  --r-2xl:  24px;
  --r-card: 24px;
  --r-pill: 9999px;

  /* ===== TYPOGRAFIE ===== */
  /* Space Grotesk (Ueberschriften, 500/700) + Manrope (Fliesstext, 400/600/700) lokal
     eingebunden (siehe @font-face oben), System-Fallback dahinter. */
  --font-display: "Space Grotesk", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body:    "Manrope", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono:    ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono", monospace;

  /* ===== CONTAINER ===== */
  --rc-container-max:       1200px;
  --rc-container-narrow:    720px;
  --rc-container-padding-x: clamp(16px, 4vw, 48px);

  /* ===== TRANSITIONS ===== */
  --rc-transition-fast:   0.15s ease;
  --rc-transition-normal: 0.2s ease;

  /* ===== WEB-CORE-BRÜCKE (Consent-Banner) =====
     @hego-factory/web-core/tracking#buildConsentBanner (ab 2.1.1) liest --ink/--ink-invert/
     --amber statt eigener Farben, damit eine Website ihr eigenes Aussehen setzen kann.
     Ohne diese Brücke bekommt der Banner die generischen HEGO-Factory-Ausweichwerte
     (dunkles Grün, Gold) statt Recurras Marke. --rc-pink ist laut eigener Doku "NUR als
     Fläche/Akzent, nie als Textfarbe" (Zeile 54 oben) — passt deshalb genau als --amber:
     dunkler Text auf hellerer Fläche, wie im Ausgangsentwurf mit Gold. */
  --ink:        var(--rc-dark);
  --ink-invert: var(--rc-inverse-on-surface);
  --amber:      var(--rc-pink);
}