/**
 * Design Tokens — 1:1 gespiegelt aus design-tokens.md des Handoffs.
 * Diese CSS-Variablen sind die Quelle der Wahrheit für Custom-Komponenten,
 * die außerhalb des Gutenberg-Kontextes gerendert werden (z.B. Site-Header,
 * Footer, klassische Templates).
 *
 * Gutenberg-Blöcke bekommen dieselben Werte automatisch via theme.json als
 * --wp--preset--color--* und --wp--preset--font-family--*.
 */

:root {
    /* Flächen */
    --bg:            #FAF6F0;
    --bg-2:          #F2EBDF;
    --bg-3:          #EADFCD;

    /* Text */
    --ink:           #2A2723;
    --ink-2:         #5B544B;
    --ink-3:         #8A8175;

    /* Linien */
    --rule:          #D9CFBD;
    --rule-2:        #E8DFCD;

    /* Akzente */
    --terracotta:    #B85C3C;
    --terracotta-ink:#8F4228;
    --sage:          #6B8463;
    --sage-ink:      #4E6349;
    --amber:         #C89253;

    /* Ampeln */
    --traffic-green: #5E8A5B;
    --traffic-amber: #CE9A3E;
    --traffic-red:   #B5503E;

    /* Typografie */
    --font-serif: 'Source Serif 4', Georgia, serif;
    --font-sans:  'IBM Plex Sans', system-ui, sans-serif;
    --font-hand:  'Caveat', cursive;

    /* Form */
    --r:            4px;
    --r-lg:         10px;
    --maxw:         1200px;
    --maxw-narrow:  880px;
    --pad-x:        28px;

    /* Fokus-Ring (a11y) — Terracotta, gut sichtbar auf Papier */
    --focus-ring: 0 0 0 3px rgba(184, 92, 60, 0.35);
}