/* Design Tokens — extrahiert aus Figma „Culturecards Design System – lite".
   Alle Werte hier zentralisiert. Nichts hardcoden, was hier existiert. */

:root {
    /* ─── Farben (Brand) ─────────────────────────────────────── */
    --color-anthrazit: #3a3532;
    --color-light-1:   #f9f5f1;   /* Page-Background, warmes Off-White */
    --color-white:     #ffffff;
    --color-black:     #000000;

    --color-brand:        #fe773f;  /* Brand Orange */
    --color-brand-light:  #fe9a71;

    /* ─── Farben (Akzent) ────────────────────────────────────── */
    --color-pink:      #e93f7b;
    --color-pink-light: #ffbadf;  /* Hellpink-Fläche für dunklen Text (WCAG AA) */
    --color-rosa:      #f4a3ce;
    --color-purple:    #9e65c6;
    --color-yellow:    #f4c400;
    --color-green:     #55df95;
    --color-red:       #e23a3a;
    --color-dark-blue: #2e3192;

    /* ─── Grauskala ──────────────────────────────────────────── */
    --color-light-2: #e4e0dc;
    --color-light-3: #cfcac7;
    --color-light-4: #b9b5b1;
    --color-light-5: #a4a09c;
    --color-dark-1:  #8f8a87;
    --color-dark-2:  #7a7572;
    --color-dark-3:  #64605c;
    --color-dark-4:  #4f4a47;

    /* ─── Semantische Aliase ─────────────────────────────────── */
    /* Achtung, Figma-Benennung ist vertauscht: Dort heißt das weiße
       Basis-BG „elevated" und der Flächen-Ton „base". Richtig ist:
       Seiten-Grund = Weiß, Karten/Pills/Interaktives = Light-1. */
    --color-bg:           var(--color-white);    /* Seiten-/Sektions-Grund */
    --color-bg-subtle:    var(--color-light-2);  /* Abstufung AUF Light-1-Flächen (Hover, Chips) */
    --color-bg-elevated:  var(--color-light-1);  /* Karten, Pills, FAQ, Tab-Container */
    --color-bg-inverse:   var(--color-anthrazit);
    --color-text:         var(--color-anthrazit);
    --color-text-muted:   var(--color-dark-3);
    --color-text-subtle:  var(--color-dark-1);
    --color-text-inverse: var(--color-white);
    --color-border:       var(--color-light-2);
    --color-border-soft:  var(--color-light-3);

    /* Farbige Section-Flächen (v2: Hero-BGs, Demo, StoryViewer-Slides) */
    --color-surface-info:    var(--color-dark-blue);  /* StoryViewer Cover, Slider */
    --color-surface-action:  var(--color-green);      /* Bestell-Karte, Action-Slide */
    --color-text-on-action:  var(--color-anthrazit);

    /* Status-Pills (Editionen-Tiles). Sitzen auf Fotos und tragen deshalb
       nach Farbkonzept durchweg helle Flächen mit anthrazitem Text —
       gesättigte Mitteltöne mit weißer Schrift wären dort nicht AA-konform. */
    --color-status-published: var(--color-green);
    --color-status-pending:   var(--color-yellow);
    --color-status-future:    var(--color-light-2);

    /* ─── Typografie ─────────────────────────────────────────── */
    --font-sans: 'PP Mori', system-ui, -apple-system, 'Segoe UI', sans-serif;

    /* Type-Scale v2 (fluid; Max-Werte = Figma Desktop 1440) */
    --text-display:   clamp(2.5rem,  1.75rem + 3vw,   4.5rem);    /* 40→72  Hero H1 */
    --text-h1:        clamp(1.75rem, 1.45rem + 1.4vw, 2.5rem);    /* 28→40  Section-Head */
    --text-h2:        clamp(1.5rem,  1.25rem + 1.1vw, 2.25rem);   /* 24→36  Card-Head */
    --text-h3:        1.125rem;                                    /* 18     Tile-Head */
    --text-body-lg:   clamp(1.125rem,1rem    + 0.4vw, 1.3125rem); /* 18→21  Subline */
    --text-body:      clamp(1rem,    0.96rem + 0.2vw, 1.125rem);  /* 16→18  Fließtext */
    --text-body-sm:   0.9375rem;                                   /* 15     Nav, Footer */
    --text-button:    1.0625rem;                                   /* 17     Buttons */
    --text-label:     0.875rem;     /* 14 — Kicker/Institution, v2 OHNE uppercase */
    --text-caption:   0.875rem;     /* 14 — Meta, Formular-Hinweise */

    --leading-tight: 1.1;
    --leading-snug:  1.25;
    --leading-base:  1.5;
    --leading-loose: 1.7;

    --tracking-tight: -0.02em;
    --tracking-base:  0;
    --tracking-button: 0;          /* v2: normale Schreibweise, kein Spacing */
    --tracking-label:  0;          /* v2: Kicker ohne Uppercase/Tracking */

    /* ─── Radien ────────────────────────────────────────────── */
    --radius-pill: 9999px;                          /* Buttons, Tiles, Status, Nav */
    --radius-soft: clamp(16px, 1.5vw, 24px);        /* Trust-Tiles, Container */
    --radius-card: clamp(20px, 2vw, 32px);          /* AnalogeKarte, Closing CTA */

    /* ─── Spacing-Skala ─────────────────────────────────────── */
    --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;
    --space-section: clamp(64px, 8vw, 128px);

    /* ─── Container ─────────────────────────────────────────── */
    --container-max: 1280px;
    --container-pad: clamp(20px, 4vw, 64px);

    /* ─── Schatten ──────────────────────────────────────────── */
    --shadow-soft:     0 6px 24px -8px rgba(58, 53, 50, 0.08);
    --shadow-floating: 0 8px 32px -10px rgba(58, 53, 50, 0.18),
                       0 2px 8px -4px rgba(58, 53, 50, 0.08);
    --shadow-press:    0 2px 6px -2px rgba(58, 53, 50, 0.12);

    /* ─── Bewegung ──────────────────────────────────────────── */
    --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --dur-fast:    150ms;
    --dur-base:    220ms;
    --dur-slow:    360ms;

    /* ─── Z-Index-Skala ────────────────────────────────────── */
    --z-base:    1;
    --z-overlay: 10;
    --z-nav:     50;
    --z-modal:   100;
}

/* prefers-reduced-motion respektieren — global */
@media (prefers-reduced-motion: reduce) {
    :root {
        --dur-fast: 0ms;
        --dur-base: 0ms;
        --dur-slow: 0ms;
    }
}