/* ==========================================================================
   SCHNELLE Shop – Design-Tokens (CSS-Custom-Properties auf :root)
   Herausgelöst aus app.css §2 (Paket P8, docs/Designsystem_01.md). Wird in
   templates/base.html.twig vor app.css geladen; alle Bereichs-Stylesheets
   (app, catalog, content, account, checkout, location, widgets) nutzen nur
   diese Tokens. Shop-Designs überschreiben sie in ihrem theme.css bzw. über
   Optionen (theme_stylesheets() schreibt geänderte Farben und die Schrift
   als <style>:root{…}</style> danach). tools/a11y-contrast.mjs liest diese Datei.
   ========================================================================== */

:root {
    /* Markenfarben (gemessen aus dem OXID-Theme, siehe docs/Designsystem_01.md) */
    --shop-navy: #183961;
    --shop-navy-hover: #12304f;
    --shop-navy-soft: #e8edf4;
    --shop-navy-focus: #183961; /* Fokusring deckend: 40 % Navy erreichte auf Weiß nur 2,2:1 (WCAG 1.4.11 verlangt 3:1) */
    --shop-ink: #3d4b58;
    --shop-ink-hover: #2c3740;
    --shop-ink-soft: #e4e7ea;
    --shop-accent: #c02124;
    --shop-accent-hover: #9c1a1d;
    --shop-accent-soft: #fbeaea;
    --shop-accent-focus: #9c1a1d; /* deckend, siehe --shop-navy-focus */
    --shop-canvas: #fff;
    --shop-surface: #f2f2f2;
    --shop-surface-strong: #e6e6e6;
    --shop-line: #dee2e6;
    --shop-line-strong: #80888f; /* Feldrahmen und UI-Linien: 3,6:1 auf Weiß, 3,2:1 auf Fläche (WCAG 1.4.11) */
    --shop-text: #4a4a4a;
    --shop-text-muted: #5f666c; /* 5,8:1 auf Weiß, 5,2:1 auf Fläche, 4,7:1 auf starker Fläche (AA) */
    --shop-text-on-dark: #fff;
    --shop-text-on-dark-muted: rgba(255, 255, 255, .72);

    /* Zustandsfarben (AA auf Weiß) */
    --shop-success: #1d6f45;
    --shop-success-soft: #e6f4ec;
    --shop-warning: #7a5200;
    --shop-warning-soft: #fff6df;
    --shop-danger: #b42318;
    --shop-danger-soft: #fdecea;
    --shop-info: var(--shop-navy);
    --shop-info-soft: var(--shop-navy-soft);

    /* Alte Token-Namen bleiben als Aliase gültig */
    --shop-deep: var(--shop-navy);
    --shop-muted: var(--shop-surface);

    /* Typografie */
    --shop-font: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --shop-text-xs: .75rem;
    --shop-text-sm: .875rem;
    --shop-text-base: 1rem;
    --shop-text-lg: 1.125rem;
    --shop-text-xl: 1.375rem;
    --shop-text-2xl: 1.75rem;
    --shop-text-3xl: clamp(2rem, 3.5vw, 2.75rem);
    --shop-text-display: clamp(2.25rem, 5vw, 3.75rem);
    --shop-leading: 1.6;

    /* Form und Abstand */
    --shop-radius: .25rem;
    --shop-radius-lg: .5rem;
    --shop-gutter: 1rem;
    --shop-shadow: 0 .5rem 1.5rem rgba(24, 57, 97, .08);
    --shop-shadow-lg: 0 1rem 2.5rem rgba(24, 57, 97, .14);
    --shop-focus-ring: 0 0 0 3px var(--shop-navy-focus);
    --shop-transition: .18s ease;

    /* Bootstrap-Variablen auf das CI mappen */
    --bs-body-font-family: var(--shop-font);
    --bs-body-color: var(--shop-text);
    --bs-body-bg: var(--shop-canvas);
    --bs-link-color: var(--shop-navy);
    --bs-link-hover-color: var(--shop-navy-hover);
    --bs-link-color-rgb: 24, 57, 97;
    --bs-link-hover-color-rgb: 18, 48, 79;
    --bs-border-color: var(--shop-line);
    --bs-primary: var(--shop-navy);
    --bs-primary-rgb: 24, 57, 97;
    --bs-danger: var(--shop-accent);
    --bs-danger-rgb: 192, 33, 36;
}