/* ==========================================================================
   Fasten Isarwinkel - Relaunch & CMS
   public/assets/css/design-tokens.css

   Verbindliche Design-Tokens (Spec: frontend_design.design_tokens +
   heritage_ist_mapping). Diese Datei definiert NUR Variablen und @font-face -
   Komponenten- und Layout-Styles liegen in app.css (Frontend) bzw. admin.css
   (Admin, eigenes schlichtes Stylesheet). app.css/admin.css importieren die
   Tokens ODER die Templates verlinken beide Dateien (Entscheidung folgt mit
   dem AssetManager/ViewFactory-Schritt).

   Heritage-Abgleich (IST -> Relaunch):
     - Sidebar-Braun #4D3319 lebt als FOOTER fort
     - Gold #D98829 bleibt Akzent (Badges); fuer TEXT auf hellem Grund
       AA-abgedunkelt (--color-gold-text; Kontrast bei Implementierung
       NACHMESSEN - offener Punkt der Spezifikation)
     - Isar-Tuerkis #2E9B8E aus dem Hero wird zweite Akzentfarbe
       (Checklisten-Haken, Info-Badges)
     - Kontrastproblem der alten Seite (#555) aufgeloest: Textfarbe #332B22

   WCAG AA: Basis 18px, Zeilenlaenge <= 70 Zeichen, sichtbare Fokus-Ringe,
   Touch-Targets >= 44px, Alt-Texte pflicht (HTML-Ebene).
   ========================================================================== */

/* --------------------------------------------------------------------------
   Self-hosted Schriften - KEIN CDN (consent-free, Spec: design_tokens.fonts)
   Dateien: public/assets/fonts/ (Quelle: @fontsource, siehe
   public/assets/vendor/manifest.json). Deutsches Subset = latin (Umlaute und
   U+00DF enthalten). font-display: swap.
   -------------------------------------------------------------------------- */

/* Alegreya - Headlines (humanistische Serife) */
@font-face {
    font-family: 'Alegreya';
    src: url('../fonts/alegreya-latin-500-normal.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

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

@font-face {
    font-family: 'Alegreya';
    src: url('../fonts/alegreya-latin-500-italic.woff2') format('woff2');
    font-weight: 500;
    font-style: italic;
    font-display: swap;
}

/* Source Sans 3 - Body (18px/1.65) */
@font-face {
    font-family: 'Source Sans 3';
    src: url('../fonts/source-sans-3-latin-400-normal.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Source Sans 3';
    src: url('../fonts/source-sans-3-latin-400-italic.woff2') format('woff2');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Source Sans 3';
    src: url('../fonts/source-sans-3-latin-600-normal.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

:root {
    color-scheme: light;

    /* ======================================================================
       Farben - Heritage-Palette (IST-Abgleich, siehe Dateikopf)
       ====================================================================== */
    --color-bg: #FAF6EF;
    --color-surface: #FFFFFF;
    --color-brown: #4D3319;
    --color-brown-dark: #3A2612;
    --color-gold: #D98829;
    --color-gold-text: #A05F16;       /* AA-abgedunkelt; Kontrast nachmessen (offener Punkt) */
    --color-teal: #2E9B8E;
    --color-text: #332B22;            /* loest IST-Kontrastproblem #555 */
    --color-muted: #6E6459;
    --color-border: #E8DFD0;

    /* Abgeleitete Badge-Varianten (Spec: badges)
       gold  = Rabatt/Aufmerksam | teal = freie Plaetze/Warteliste | muted = ausgebucht */
    --badge-gold-bg: #FBEEDB;
    --badge-gold-text: var(--color-gold-text);
    --badge-teal-bg: #E2F1EE;
    --badge-teal-text: #1F6E64;
    --badge-muted-bg: #EFEBE3;
    --badge-muted-text: var(--color-muted);

    /* Feedback-Farben fuer das Form-Kit (nicht aus IST-Spektrum;
       AA-Kontrast gegen --color-bg geprueft) */
    --color-danger: #9C3B22;
    --color-success: var(--color-teal);
    --color-warning: var(--color-gold-text);

    /* Signaturmotiv: halbtransparenter dunkler Caption-Balken unten links
       auf jedem Hero (Versalen-Caption, z.B. "WILDE ISAR") */
    --overlay-caption: rgba(58, 38, 18, 0.78);

    /* ======================================================================
       Typografie
       ====================================================================== */
    --font-heading: 'Alegreya', Georgia, 'Times New Roman', serif;
    --font-body: 'Source Sans 3', 'Segoe UI', Arial, sans-serif;

    --font-weight-body: 400;
    --font-weight-strong: 600;         /* <strong>: EINZIGE Inline-Auszeichnung, CSS-gezaehmt (app.css) */
    --font-weight-heading: 500;
    --font-weight-heading-strong: 700;

    /* Skala 1.25 - Hauptstufen 18/22/28/36/44 */
    --fs-body: 18px;
    --fs-md: 22px;
    --fs-h3: 28px;
    --fs-h2: 36px;
    --fs-h1: 44px;

    /* Hilfsstufen UNTERHALB der Skala (Meta, Badges, Fussnoten, Tabellenfuesse) */
    --fs-sm: 16px;
    --fs-xs: 14px;

    --lh-body: 1.65;                   /* Spec: Body 18px/1.65 */
    --lh-heading: 1.2;
    --lh-tight: 1.35;
    --measure: 70ch;                  /* Zeilenlaenge <= 70 Zeichen */
    --letter-spacing-caps: 0.08em;     /* Versalen-Motiv (Hero-Caption, Eyebrows) */

    /* ======================================================================
       Raum - 8px-Grid
       ====================================================================== */
    --space-8: 8px;
    --space-16: 16px;
    --space-24: 24px;
    --space-32: 32px;
    --space-40: 40px;
    --space-48: 48px;
    --space-64: 64px;
    --space-80: 80px;
    --space-96: 96px;

    /* Sektionsabstaende: Desktop 64-96px / Mobil 40-48px (Spec) */
    --section-y: clamp(40px, 4vw + 24px, 96px);
    --section-y-tight: clamp(40px, 2.5vw + 28px, 64px);

    --gutter: clamp(16px, 4vw, 32px);

    /* ======================================================================
       Layout
       ====================================================================== */
    --container-max: 1200px;
    --touch-target: 44px;              /* Touch-Targets >= 44px (Mobilregeln) */

    /* Breakpoints als Doku-Token: @media kann KEINE custom properties
       auswerten - app.css/admin.css nutzen die Literalwerte 640/900/1200. */
    --bp-sm: 640px;
    --bp-md: 900px;
    --bp-lg: 1200px;

    /* ======================================================================
       Radien & Schatten (warm getoent, ruhig)
       ====================================================================== */
    --radius-sm: 8px;
    --radius-md: 10px;

    --shadow-sm: 0 1px 3px rgba(77, 51, 25, 0.08);
    --shadow-md: 0 4px 14px rgba(77, 51, 25, 0.12);

    /* ======================================================================
       Fokus & Interaktion (sichtbare Fokus-Ringe, WCAG AA)
       ====================================================================== */
    --focus-width: 2px;
    --focus-color: var(--color-teal);
    --focus-ring: var(--focus-width) solid var(--focus-color);

    /* ======================================================================
       Bewegung - ruhig; prefers-reduced-motion greift in app.css/core.js
       ====================================================================== */
    --transition-fast: 150ms;
    --transition-base: 300ms;
    --hero-fade: 800ms;                /* Crossfade-Dauer Hero-Slider */
    --hero-interval: 7500ms;           /* 7-8s Ruhezustand je Slide (Pause bei Hover/Fokus) */

    /* ======================================================================
       Z-Index-Skala (App-Konvention)
       ====================================================================== */
    --z-nav: 100;                      /* Header, Slide-Over-Navigation */
    --z-sticky: 150;                   /* Sticky-Summenleiste (Mobile, Buchung) */
    --z-slideover: 200;
    --z-lightbox: 300;
}