/* Dark is the effective default: it sits on bare :root, and light only applies when asked for, by the
   system preference or the toggle. The token names match QuidnePublicWebsite's so the two sites read
   the same way; the light block is declared twice for the same reason the public site declares its
   dark block twice — light-dark() in a custom property fails silently on engines that lack it. */
:root {
    color-scheme: dark;

    --accent: #7fc3cb;
    --action: #6b9ea4;
    --action-hover: #9fd4da;
    --danger: #e38b84;

    --ink: #e8e6e3;
    --ink-strong: #f2f0ed;
    --ink-muted: #b3aeaa;
    --ink-faint: #8d8884;
    --ink-on-action: #0f1112;

    --surface: #16181a;
    --surface-sunken: #1f2325;
    --surface-raised: #23282a;
    --rule: #3a3f42;

    --font-body: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --font-mono: ui-monospace, 'Cascadia Code', 'Cascadia Mono', Consolas, 'SF Mono', Menlo, monospace;

    --step--1: 0.875rem;
    --step-0: 1rem;
    --step-1: 1.25rem;

    --lh-body: 1.5;
    --header-height: 3.5rem;
    --list-width: 22rem;

    --space-3xs: 0.25rem;
    --space-2xs: 0.5rem;
    --space-xs: 0.75rem;
    --space-s: 1rem;
    --space-m: 1.5rem;
    --space-l: 2.5rem;

    --focus-ring-width: 3px;
    --focus-ring-color: var(--action-hover);
    --focus-ring-offset: 2px;

    --radius: 4px;
    --transition: 150ms ease;
}

@media (prefers-color-scheme: light) {
    :root:not([data-theme='dark']) {
        color-scheme: light;

        --accent: #366d74;
        --action: #366d74;
        --action-hover: #4682b4;
        --danger: #a4332b;

        --ink: #222;
        --ink-strong: #111;
        --ink-muted: #595959;
        --ink-faint: #767676;
        --ink-on-action: #fff;

        --surface: #fff;
        --surface-sunken: #ececec;
        --surface-raised: #f6f6f6;
        --rule: #d8d8d8;
    }
}

:root[data-theme='light'] {
    color-scheme: light;

    --accent: #366d74;
    --action: #366d74;
    --action-hover: #4682b4;
    --danger: #a4332b;

    --ink: #222;
    --ink-strong: #111;
    --ink-muted: #595959;
    --ink-faint: #767676;
    --ink-on-action: #fff;

    --surface: #fff;
    --surface-sunken: #ececec;
    --surface-raised: #f6f6f6;
    --rule: #d8d8d8;
}

/* The light pair is (0,2,0) and outranks bare :root, so each contrast block has a light twin. */
@media (prefers-contrast: more) {
    :root {
        --ink-muted: #d4d0cc;
        --ink-faint: #c4bfba;
        --rule: #8a8f92;
        --focus-ring-width: 4px;
    }

    :root[data-theme='light'] {
        --ink-muted: #3a3a3a;
        --ink-faint: #4a4a4a;
        --rule: #767676;
    }
}

@media (prefers-contrast: more) and (prefers-color-scheme: light) {
    :root:not([data-theme='dark']) {
        --ink-muted: #3a3a3a;
        --ink-faint: #4a4a4a;
        --rule: #767676;
    }
}