/**
 * Design tokens: a fallback copy of vilstaler-theme/assets/css/variables.css.
 *
 * :where(:root) has specificity 0, so the theme's :root values always win,
 * whichever stylesheet prints first. This copy only matters when the theme is
 * not there, and keeps vilstaler-cookie-consent rendering in the same colours then.
 * Do not edit it on its own: change variables.css and all three copies
 * together. tests/js/design-tokens.test.mjs fails when they differ.
 */

:where(:root) {
    /* Brand Colors - Single Primary */
    --color-primary: #2c5aa0;
    --color-primary-light: #3d6db5;
    --color-primary-dark: #1e4080;

    /* Semantic Colors */
    --color-success: #155724;
    --color-success-bg: #d4edda;
    --color-error: #721c24;
    --color-error-bg: #f8d7da;
    --color-success-accent: #2e7d32;
    --color-warning: #5c4600;
    --color-warning-bg: #fff8e1;
    --color-warning-accent: #e65100;
    /* 5.6:1 behind white text, so a danger button stays readable. */
    --color-danger: #c62828;
    --color-danger-dark: #9f1f1f;
    --color-info-bg: #e8f4f8;
    --color-info-bg-subtle: #f4f7fb;
    --color-info-border: #c8d6e8;
    /* A closed registration: 5.0:1 on --color-warning-bg's paler cousin
       #fff3e0, where the old #e65100 was 3.5:1. */
    --color-status-closed: #b34700;

    /* Neutral Scale */
    --color-black: #111111;
    --color-gray-900: #222222;
    --color-gray-800: #333333;
    --color-gray-700: #555555;
    --color-gray-600: #666666;
    --color-gray-500: #888888;
    --color-gray-400: #cccccc;
    --color-gray-300: #dddddd;
    --color-gray-200: #eeeeee;
    --color-gray-100: #f8f9fa;
    --color-gray-50: #fafafa;
    --color-white: #ffffff;

    /* Semantic */
    --color-text: var(--color-black);
    --color-text-muted: var(--color-gray-600);
    /* Hints that must stay readable: 7:1 on white (DECISIONS item 9). */
    --color-text-subtle: #595959;
    /* Text of a control that cannot be used: still 4.5:1 on white. */
    --color-text-disabled: #767676;
    --color-bg: var(--color-gray-50);
    --color-bg-alt: var(--color-white);
    --color-border: var(--color-gray-300);
    /* The edge of a text input, select or textarea. WCAG 1.4.11 wants 3:1
       against its surroundings; #767676 is 4.5:1 on white and 4.4:1 on
       --color-bg (DECISIONS item 9). */
    --color-border-control: #767676;

    /* Overlays: dialog backdrops, the lightbox, and controls sitting on them */
    --color-overlay: rgba(0, 0, 0, 0.7);
    --color-overlay-strong: rgba(0, 0, 0, 0.95);
    --color-on-dark-subtle: rgba(255, 255, 255, 0.2);
    --color-on-dark-hover: rgba(255, 255, 255, 0.3);

    /* Focus */
    --focus-ring: 3px solid var(--color-primary);
    --focus-offset: 2px;

    /* Spacing (8px base) */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;

    /* Border Radius */
    --radius-sm: 3px;
    --radius-md: 6px;
    --radius-lg: 8px;
    --radius-xl: 12px;
    --radius-full: 9999px;
    --radius-control: 4px;
    --radius-card: 8px;
    --radius-modal: 12px;

    /* Smallest height of anything tapped (WCAG 2.5.5). */
    --tap-min: 44px;

    /* Typography - Lato Only */
    --font-sans: 'Lato', Helvetica, sans-serif;
    --font-mono: Menlo, Monaco, monospace;
    --font-size-xs: 0.8125rem;
    --font-size-sm: 0.875rem;
    --font-size-md: 1rem;
    --font-size-lg: 1.25rem;

    /* Shadows */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 40px rgba(0, 0, 0, 0.2);
    --shadow-hover: 0 4px 12px rgba(0, 0, 0, 0.15);

    /* Transitions */
    --transition-fast: 0.1s ease-in-out;
    --transition-base: 0.2s ease-in-out;
    --transition-slow: 0.3s ease-in-out;

    /* Stacking: menu < modal < lightbox < consent. The consent banner has to
       stay reachable above everything else, including an open lightbox. */
    --z-menu: 1000;
    --z-modal: 10000;
    --z-lightbox: 100000;
    --z-consent: 1000000;
}