/* Design tokens. The layout prints the dashboard colours (Settings::cssVariables) after this file. */
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/barlow-400.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 500; font-display: swap; src: url("/assets/fonts/barlow-500.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 600; font-display: swap; src: url("/assets/fonts/barlow-600.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 700; font-display: swap; src: url("/assets/fonts/barlow-700.woff2") format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 600; font-display: swap; src: url("/assets/fonts/barlow-condensed-600.woff2") format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 700; font-display: swap; src: url("/assets/fonts/barlow-condensed-700.woff2") format("woff2"); }

:root {
    /* Dashboard colours (style A defaults, M2 spec §8.1) */
    --color-primary: #C6F432;
    --color-on-primary: #000000;
    --color-accent: #D93036;
    --color-on-accent: #FFFFFF;
    --color-bg: #0B0F17;
    --color-surface: #131A26;
    --color-text: #EEF2F7;
    --color-muted: #8B97A8;

    /* Derived from the six above, so any dashboard palette stays coherent */
    --color-surface-2: color-mix(in srgb, var(--color-surface) 94%, var(--color-text));
    --color-border: color-mix(in srgb, var(--color-surface) 94%, var(--color-text));
    --color-border-strong: color-mix(in srgb, var(--color-surface) 86%, var(--color-text));
    --color-text-soft: color-mix(in srgb, var(--color-text) 65%, var(--color-muted));
    --color-live-text: color-mix(in srgb, var(--color-accent) 60%, var(--color-text));
    --color-footer: color-mix(in srgb, var(--color-bg) 70%, #000000);

    --font-body: "Barlow", system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-head: "Barlow Condensed", "Barlow", system-ui, sans-serif;

    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-7: 28px;
    --space-8: 32px;
    --space-10: 40px;
    --space-12: 48px;
    --space-14: 56px;
    --space-16: 64px;

    --radius-lg: 10px;
    --radius-md: 8px;
    --radius-sm: 6px;
    --radius-pill: 999px;

    --container: 1360px;
    --gutter: 16px;
    --header-h: 60px;
    --tabbar-h: 64px;
    --focus-ring: 0 0 0 3px color-mix(in srgb, var(--color-primary) 70%, transparent);
}

@media (min-width: 1024px) {
    :root { --gutter: 40px; --header-h: 68px; }
}