/* Erzeugt von tools/generate-theme-json.mjs aus design/tokens.json. Nicht von Hand ändern. */
/* Quelle: design/tokens.json (Version 1.6.0) */

:root {
    /* Farben: WP-Presets -> Legacy-Aliase */
    --color-base: var(--wp--preset--color--base);
    --color-primary: var(--wp--preset--color--primary);
    --color-primary-hover: var(--wp--preset--color--primary-hover);
    --color-primary-50: var(--wp--preset--color--primary-50);
    --color-primary-light: var(--wp--preset--color--primary-light);
    --color-secondary: var(--wp--preset--color--secondary);
    --color-secondary-20: var(--wp--preset--color--secondary-20);
    --color-accent: var(--wp--preset--color--accent);
    --color-accent-50: var(--wp--preset--color--accent-50);
    --color-accent-dark-wcag: var(--wp--preset--color--accent-dark-wcag);
    --color-text: var(--wp--preset--color--text);
    --color-dark: var(--wp--preset--color--dark);
    --color-error: var(--wp--preset--color--error);
    --color-error-subtle: var(--wp--preset--color--error-subtle);
    --color-line: var(--wp--preset--color--line);
    --color-partner-mfiles: var(--wp--preset--color--partner-mfiles);
    --color-product-teleform: var(--wp--preset--color--product-teleform);
    --color-product-mfiles: var(--wp--preset--color--product-mfiles);
    --color-product-mfiles-qms: var(--wp--preset--color--product-mfiles-qms);
    --color-product-liquidoffice: var(--wp--preset--color--product-liquidoffice);

    /* Schriften */
    --font-lora: var(--wp--preset--font-family--lora);
    --font-quicksand: var(--wp--preset--font-family--quicksand);
    --font-merriweather: var(--wp--preset--font-family--merriweather);
    --font-handlee: var(--wp--preset--font-family--handlee);
    --font-primary: var(--wp--preset--font-family--quicksand);
    --font-secondary: var(--wp--preset--font-family--lora);
    --font-quote: var(--wp--preset--font-family--merriweather);

    /* Form */
    --standard-border-radius: var(--wp--custom--border-radius);
    --radius-lg: var(--wp--custom--border-radius-lg);
    --standard-box-shadow: var(--wp--custom--box-shadow);

    /* Zeilenhöhen */
    --line-height-body: 1.6;
    --line-height-ui: 1.4;
    --line-height-heading: 1.25;
    --line-height-display: 1.15;

    /* Linien und Maße */
    --line-grey: var(--wp--preset--color--line);
    --content-size: 1200px;
    --wide-size: 2560px;
    --gutter-page: 120px;
    --touch-min: 44px;
    --prose-max-width: 68ch;
    --section-spacing: clamp(3rem, 6vw, 6rem);
    --grid-mesh: 32px;

    /* Bewegung */
    --motion-entrance-duration: 320ms;
    --motion-entrance-easing: cubic-bezier(0.16, 1, 0.3, 1);
    --motion-lift-duration: 160ms;
    --motion-lift-easing: ease-out;
    --motion-state-duration: 150ms;
    --motion-state-easing: ease-out;
}

/* Fokusring, verbindlich aus tokens.components.focus (Bauauftrag N4). */
/* Bewusst ohne :where(), damit er auch fuer [role="button"] und [tabindex] greift. */
:focus-visible {
    outline: 3px solid var(--color-accent-dark-wcag);
    outline-offset: 2px;
}
/* Vorgabe wörtlich: outline: 3px solid #00656E; outline-offset: 2px; */