/* Import Nimbus Design System Theme */
/**
 * Nimbus Design System - CSS Theme
 * Auto-generated from Figma Design Tokens
 *
 * This file contains all design tokens as CSS custom properties.
 * The theme automatically adapts to light/dark mode using prefers-color-scheme.
 *
 * NOTE: the @import below is hand-added and must survive regeneration from the
 * token export. Everything after it is generated.
 */
/* Global scrollbar chrome. Hand-written, kept in its own file so a token
   regeneration of this one cannot clobber it. Must stay above all rules —
   @import is only valid at the top of a stylesheet. */
/**
 * Nimbus Design System - Scrollbars
 *
 * A single floating-pill scrollbar for every scroll container: no track chrome,
 * a narrow rounded thumb inset from the container edge.
 *
 * Hand-written, and deliberately NOT part of theme.css — that file is generated
 * from the Figma token export and would lose these rules on the next sync. It is
 * imported by theme.css so consumers still get it from the one entry point.
 *
 * Two engines, two mechanisms — each ignores the other's properties, so the
 * rules coexist and Firefox degrades to the closest thing it can express:
 *   - Firefox: `scrollbar-width` / `scrollbar-color` only. Thin and recoloured,
 *     but the thumb still spans the full track — no inset pill is possible.
 *   - WebKit/Blink (Chrome, Edge, Safari, Electron): the ::-webkit-scrollbar
 *     pseudo-elements give full control, which is what produces the design.
 *
 * The inset is a transparent border on the thumb rather than a narrower track:
 * a thumb always fills its track's width, so shrinking the track would shrink
 * the hit area too. `background-clip: padding-box` keeps the border transparent
 * to the (transparent) track, leaving a centred pill with a comfortable grab
 * target either side of it.
 */
:root {
    /* Thumb colours are deliberately borders, not text: the scrollbar is chrome
       that sits beside content, and the border ramp is the token scale tuned for
       that weight. Both resolve per-theme, so the bar follows light/dark with no
       extra rules here. */
    --scrollbar-size: 10px;
    --scrollbar-inset: 3px;
    --scrollbar-thumb: var(--border-60);
    --scrollbar-thumb-hover: var(--text-paragraph);
}
/* Firefox. Set on the root and inherited, so nested scroll containers pick it
   up without each needing its own rule. */
html {
    scrollbar-width: thin;
    scrollbar-color: var(--scrollbar-thumb) transparent;
}
/* WebKit does NOT inherit scrollbar pseudo-elements, so this has to match every
   scrollable element rather than just the root. `:where()` keeps specificity at
   zero — any component rule that wants a different scrollbar overrides this
   without needing !important or a specificity fight. */
:where(*)::-webkit-scrollbar {
    width: var(--scrollbar-size);
    height: var(--scrollbar-size);
}
:where(*)::-webkit-scrollbar-track {
    background: transparent;
}
:where(*)::-webkit-scrollbar-thumb {
    background-color: var(--scrollbar-thumb);
    border: var(--scrollbar-inset) solid transparent;
    background-clip: padding-box;
    border-radius: 999px;
}
:where(*)::-webkit-scrollbar-thumb:hover {
    background-color: var(--scrollbar-thumb-hover);
}
/* The square where the vertical and horizontal bars meet: left at its default
   it paints an opaque grey patch in the corner of dual-axis scrollers. */
:where(*)::-webkit-scrollbar-corner {
    background: transparent;
}
:root {
    color-scheme: light dark;
}
/* Light Theme (Default) */
:root {
    /* Backgrounds - Surface */
    --bg-surface-primary: #ffffff;
    --bg-surface-secondary: #f5f7f9;
    --bg-page: #f6f7f9;
    --bg-surface-invert: #ffffff;
    --bg-surface-invert-2: #edeff2;
    --bg-surface-brand: #403456;

    /* Backgrounds - Buttons */
    --bg-button-primary: #303640;
    --text-button-primary: #ffffff;
    --bg-button-secondary: #edeff2;
    --bg-button-ghost: #ffffff;
    --bg-button-border: #d7dae0;
    --bg-button-disable: #edeff2;

    /* Backgrounds - Chips */
    --bg-chip-filled: #edeff2;
    --bg-chip-border: #edeff2;

    /* Backgrounds - Content Switcher */
    --bg-cs-bg: #edeff2;
    --bg-cs-highlight: #ffffff;

    /* Backgrounds - Footer */
    --bg-footer-surface-primary: #f6f7f9;
    --bg-footer-border-selected: #232933;

    /* Borders */
    --border-20: #d7dae0;
    --border-40: #d7dae0;
    --border-60: #bdc4d1;
    --border-100: #232933;
    --border-brand: #2d1b3f;

    /* Text Colors */
    --text-title: #232933;
    --text-paragraph: #5c6575;
    --text-disable: #bdc4d1;
    --text-invert: #ffffff;
    --text-brand: #2d1b3f;

    /* Icon Colors */
    --icon-hero: #171b27;
    --icon-secondary: #5c6575;
    --icon-disable: #828b99;
    --icon-brand: #675d78;

    /* Status Colors */
    --color-cleared: #589a23;
    --color-fire: #e6251e;
    --color-mode-service: #7b3fbe;
    --color-mode-weekly-test: #285cc3;
}
/* Dark Theme */
@media (prefers-color-scheme: dark) {
    :root {
        /* Backgrounds - Surface */
        --bg-surface-primary: #303640;
        --bg-surface-secondary: #464e5c;
        --bg-page: #232933;
        --bg-surface-invert: #464e5c;
        --bg-surface-invert-2: #5c6575;
        --bg-surface-brand: #d8d6dd;

        /* Backgrounds - Buttons */
        --bg-button-primary: #5c6575;
        --text-button-primary: #ffffff;
        --bg-button-secondary: #303640;
        --bg-button-ghost: #232933;
        --bg-button-border: #464e5c;
        --bg-button-disable: #303640;

        /* Backgrounds - Chips */
        --bg-chip-filled: #303640;
        --bg-chip-border: #303640;

        /* Backgrounds - Content Switcher */
        --bg-cs-bg: #464e5c;
        --bg-cs-highlight: #303640;

        /* Backgrounds - Footer */
        --bg-footer-surface-primary: #303640;
        --bg-footer-border-selected: #bdc4d1;

        /* Borders */
        --border-20: #5c6575;
        --border-40: #464e5c;
        --border-60: #5c6575;
        --border-100: #f6f7f9;
        --border-brand: #675d78;

        /* Text Colors */
        --text-title: #ffffff;
        --text-paragraph: #d7dae0;
        --text-disable: #5c6575;
        --text-invert: #232933;
        --text-brand: #2d1b3f;

        /* Icon Colors */
        --icon-hero: #ffffff;
        --icon-secondary: #d7dae0;
        --icon-disable: #bdc4d1;
        --icon-brand: #675d78;

        /* Status Colors */
        --color-cleared: #589a23;
        --color-fire: #e6251e;
        --color-mode-service: #7b3fbe;
        --color-mode-weekly-test: #285cc3;
    }
}
/* Force Light Theme */
[data-theme="light"] {
    color-scheme: light;

    /* Backgrounds - Surface */
    --bg-surface-primary: #ffffff;
    --bg-surface-secondary: #f5f7f9;
    --bg-page: #f6f7f9;
    --bg-surface-invert: #ffffff;
    --bg-surface-invert-2: #edeff2;
    --bg-surface-brand: #403456;

    /* Backgrounds - Buttons */
    --bg-button-primary: #303640;
    --text-button-primary: #ffffff;
    --bg-button-secondary: #edeff2;
    --bg-button-ghost: #ffffff;
    --bg-button-border: #d7dae0;
    --bg-button-disable: #edeff2;

    /* Backgrounds - Chips */
    --bg-chip-filled: #edeff2;
    --bg-chip-border: #edeff2;

    /* Backgrounds - Content Switcher */
    --bg-cs-bg: #edeff2;
    --bg-cs-highlight: #ffffff;

    /* Backgrounds - Footer */
    --bg-footer-surface-primary: #f6f7f9;
    --bg-footer-border-selected: #232933;

    /* Borders */
    --border-20: #d7dae0;
    --border-40: #d7dae0;
    --border-60: #bdc4d1;
    --border-100: #232933;
    --border-brand: #2d1b3f;

    /* Text Colors */
    --text-title: #232933;
    --text-paragraph: #5c6575;
    --text-disable: #bdc4d1;
    --text-invert: #ffffff;
    --text-brand: #2d1b3f;

    /* Icon Colors */
    --icon-hero: #171b27;
    --icon-secondary: #5c6575;
    --icon-disable: #828b99;
    --icon-brand: #675d78;

    /* Status Colors */
    --color-cleared: #589a23;
    --color-fire: #e6251e;
    --color-mode-service: #7b3fbe;
    --color-mode-weekly-test: #285cc3;
}
/* Force Dark Theme */
[data-theme="dark"] {
    color-scheme: dark;

    /* Backgrounds - Surface */
    --bg-surface-primary: #303640;
    --bg-surface-secondary: #464e5c;
    --bg-page: #232933;
    --bg-surface-invert: #464e5c;
    --bg-surface-invert-2: #5c6575;
    --bg-surface-brand: #d8d6dd;

    /* Backgrounds - Buttons */
    --bg-button-primary: #5c6575;
    --text-button-primary: #ffffff;
    --bg-button-secondary: #303640;
    --bg-button-ghost: #232933;
    --bg-button-border: #464e5c;
    --bg-button-disable: #303640;

    /* Backgrounds - Chips */
    --bg-chip-filled: #303640;
    --bg-chip-border: #303640;

    /* Backgrounds - Content Switcher */
    --bg-cs-bg: #464e5c;
    --bg-cs-highlight: #303640;

    /* Backgrounds - Footer */
    --bg-footer-surface-primary: #303640;
    --bg-footer-border-selected: #bdc4d1;

    /* Borders */
    --border-20: #5c6575;
    --border-40: #464e5c;
    --border-60: #5c6575;
    --border-100: #f6f7f9;
    --border-brand: #675d78;

    /* Text Colors */
    --text-title: #ffffff;
    --text-paragraph: #d7dae0;
    --text-disable: #5c6575;
    --text-invert: #232933;
    --text-brand: #2d1b3f;

    /* Icon Colors */
    --icon-hero: #ffffff;
    --icon-secondary: #d7dae0;
    --icon-disable: #bdc4d1;
    --icon-brand: #675d78;

    /* Status Colors */
    --color-cleared: #589a23;
    --color-fire: #e6251e;
    --color-mode-service: #7b3fbe;
    --color-mode-weekly-test: #285cc3;
}
:root {
    font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
    line-height: 1.5;
    font-weight: 400;

    color: var(--text-paragraph);
    background-color: var(--bg-surface-primary);

    font-synthesis: none;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
body {
    margin: 0;
    display: flex;
    place-items: center;
    min-width: 320px;
    min-height: 100vh;
}
h1 {
    font-size: 3.2em;
    line-height: 1.1;
    color: var(--text-title);
}