/*
 * fresh CI Tokens
 * Quelle: fresh.design cheat sheet
 *
 * Verwendung: In das Theme einbinden via <link> im Layout-Head, vor
 * theme.css. Niemand schreibt direkt #e50046 oder andere Hex-Werte im
 * Theme-Code — alles geht über diese Tokens.
 */

:root {
  /* === Primärfarben === */
  --fresh-rose:  #e50046;
  --fresh-wind:  #36c9c5;
  --fresh-river: #1f4859;

  /* Rose-Variationen */
  --fresh-rose-light:  #ff005c;
  --fresh-rose-dark-a: #bf0032;
  --fresh-rose-dark-b: #9e002a;
  --fresh-rose-dark-c: #7f0021;

  /* Wind-Variationen */
  --fresh-wind-light:  #00ddd2;
  --fresh-wind-dark-a: #36b2ac;
  --fresh-wind-dark-b: #34938a;
  --fresh-wind-dark-c: #267f77;

  /* Dark-Skala (Hintergründe, von tiefst nach hell) */
  --fresh-night:      #050a0d;  /* extreme: ersetzt schwarz, river-getönt */
  --fresh-dark-omega: #0a1114;
  --fresh-dark-d:     #132026;
  --fresh-dark-c:     #172a33;
  --fresh-dark-b:     #19333f;
  --fresh-dark-a:     #1b3d4c;
  --fresh-river-mid:  #385866;
  --fresh-river-soft: #466e7f;
  --fresh-river-light:#5e8696;  /* heller river-shade für Untertitel/Rollen */

  /* Akzentfarben (sparsam einsetzen) */
  --fresh-yellow: #ffd400;
  --fresh-orange: #f28519;
  --fresh-red:    #f22525;
  --fresh-green:  #6fb23f;
  --fresh-blue:   #0066a5;
  --fresh-purple: #55318c;
  --fresh-pink:   #ff8dc9;
  --fresh-brown:  #996b3d;

  /* === Semantische Tokens === */
  --color-bg-page:       var(--fresh-night);          /* sehr dunkel als Body-Default */
  --color-bg-surface:    var(--fresh-dark-omega);
  --color-bg-elevated:   var(--fresh-dark-d);
  --color-bg-section-a:  var(--fresh-night);
  --color-bg-section-b:  var(--fresh-dark-omega);
  --color-bg-section-c:  var(--fresh-dark-d);
  --color-bg-section-d:  var(--fresh-dark-c);
  --color-bg-sticker:    #ffffff;

  --color-text-primary:    #ffffff;
  --color-text-secondary:  rgba(255, 255, 255, 0.72);
  --color-text-tertiary:   rgba(255, 255, 255, 0.48);
  --color-text-on-rose:    #ffffff;
  --color-text-on-wind:    #ffffff;
  --color-text-on-sticker: var(--fresh-dark-d);

  --color-accent-primary:   var(--fresh-rose);
  --color-accent-secondary: var(--fresh-wind);

  --color-border-subtle: rgba(255, 255, 255, 0.06);
  --color-border-glass:  rgba(255, 255, 255, 0.28);

  /* === Typografie === */
  --font-display: "Barlow Condensed", "Helvetica Neue", sans-serif;
  --font-body:    "Raleway", "Helvetica Neue", sans-serif;

  /* Type-Scale (1.5×) */
  --fs-100: 0.75rem;   /* 12px - Meta/Mini-Tags */
  --fs-200: 0.875rem;  /* 14px - small body */
  --fs-300: 1rem;      /* 16px - body default */
  --fs-400: 1.5rem;    /* 24px - h4 / Lead-Text */
  --fs-500: 2.25rem;   /* 36px - h3 / Sektionsüberschrift */
  --fs-600: 3.375rem;  /* 54px - h2 / Hero-Titel */
  --fs-700: 5rem;      /* 80px - Hero-Zahlen / Display */

  /* === 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;

  /* === Layout === */
  --radius-none: 0;
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 6px;

  /* Sticker-Mikrointeraktion (siehe tilt.js) */
  --tilt-transition: transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Schatten-Logik (verbindlich):
     1. Sticker (weiße/vollfarbige Wort- und Eyebrow-Sticker): IMMER --shadow-sticker.
     2. Cards ruhend: FLACH (kein Schatten, nur Border/Fläche).
     3. Interaktive Cards bei :hover: translateY(-3px) + --shadow-card.
     4. Freistehende Foto-Objekte (z.B. Portrait auf Detail-Seite): --shadow-card statisch.
     Keine anderen box-shadow-Werte im Theme. */
  --shadow-sticker: 0 6px 18px rgba(0, 0, 0, 0.25);
  --shadow-card:    0 12px 30px rgba(0, 0, 0, 0.35);
}

/*
 * Webfonts via Google Fonts.
 * Im Layout-HTML zusätzlich einbinden:
 *
 *   <link rel="preconnect" href="https://fonts.googleapis.com">
 *   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
 *   <link rel="stylesheet" href="https://fonts.googleapis.com/css2?
 *     family=Barlow+Condensed:wght@500;700;800;900
 *     &family=Raleway:wght@400;600;700
 *     &display=swap">
 */