/*
 * Marken-Tokens – LEO Außenanlagen.
 * Einzige Quelle für Farben/Typografie/Abstände. Änderungen hier wirken
 * automatisch auf der gesamten Website.
 */

@font-face {
    font-family: 'Cormorant Garamond';
    src: url('/assets/fonts/CormorantGaramond-Variable.ttf') format('truetype');
    font-weight: 500 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Inter';
    src: url('/assets/fonts/Inter-Variable.ttf') format('truetype');
    font-weight: 400 700;
    font-style: normal;
    font-display: swap;
}

:root {
    /* Markenfarben (verbindlich, siehe Markenprofil) */
    --color-dark-green: #243228;
    --color-forest-green: #4F5A4E;
    --color-sage-green: #6F8575;
    --color-cream: #F4F0E8;
    --color-stone-beige: #E8E4DA;
    --color-terracotta: #C45A37;
    --color-white: #FFFFFF;

    /* Semantische Zuordnung */
    --color-bg: var(--color-cream);
    --color-bg-alt: var(--color-stone-beige);
    --color-surface: var(--color-white);
    --color-text: var(--color-dark-green);
    --color-text-muted: var(--color-forest-green);
    --color-heading: var(--color-dark-green);
    --color-accent: var(--color-terracotta);
    --color-accent-contrast: var(--color-white);
    --color-border: var(--color-stone-beige);
    --color-border-strong: var(--color-sage-green);

    /* Terrakotta (#C45A37) auf Creme/Weiß erreicht nur 3.80:1 bzw. 4.32:1
       Kontrast (berechnet nach WCAG-Relativluminanz) – beides unter der
       4.5:1-Schwelle für Fließtext. Deshalb: reines --color-terracotta nur
       als Flächenfarbe (mit hellem, fettem Text), für große Überschriften-
       Akzente, Linien, Icons oder Rahmen verwenden – nie als Fließtextfarbe.
       Für Text (Eyebrow-Label, Fehlermeldungen) stattdessen die abgedunkelte
       Variante --color-terracotta-text nutzen (5.44:1 auf Creme, 4.78:1 auf
       Weiß – besteht WCAG AA für Fließtext). */
    --color-terracotta-text: #9D482C;

    /* Typografie */
    --font-display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
    --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

    --text-xs: 0.8rem;
    --text-sm: 0.9rem;
    --text-base: 1rem;
    --text-lg: 1.15rem;
    --text-xl: 1.4rem;
    --text-2xl: clamp(1.7rem, 1.4rem + 1.2vw, 2.3rem);
    --text-3xl: clamp(2.1rem, 1.7rem + 1.8vw, 3rem);
    --text-4xl: clamp(2.6rem, 2rem + 2.8vw, 4rem);
    --text-5xl: clamp(3.2rem, 2.3rem + 4vw, 5.2rem);

    --leading-tight: 1.15;
    --leading-normal: 1.5;
    --leading-relaxed: 1.7;

    /* Abstands-Skala (4px-Basis) */
    --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;
    --space-10: 8rem;

    /* Struktur */
    --container-max: 1200px;
    --container-padding: var(--space-5);
    --radius: 3px;
    --border-width: 1px;

    /* Bewusst KEINE --shadow-* Variablen: Markenregel verbietet Schatten.
       Abgrenzung erfolgt über Rahmen/Flächenwechsel, siehe components.css. */

    /* Übergänge */
    --transition-fast: 150ms ease;
    --transition-base: 250ms ease;
}

/* Breakpoints (Referenz, da CSS Custom Properties nicht in @media nutzbar
   sind): Mobile < 640px · Tablet 640-1023px · Desktop >= 1024px */

@media (prefers-reduced-motion: reduce) {
    :root {
        --transition-fast: 0ms;
        --transition-base: 0ms;
    }
}