/* Shared by the application, its first paint and the independent setup form.
   Feature styles consume these roles; collection palettes stay on their own surface. */
:root {
    color-scheme: dark;
    --color-canvas: #161618;
    --color-surface-1: #212121;
    --color-surface-2: #2a2e31;
    --color-surface-3: #30353a;
    --color-text-strong: #f2f5f4;
    --color-text: #c7c9cb;
    --color-text-muted: #a5a7aa;
    --color-border-subtle: #2a2e31;
    --color-border: #676d72;
    --color-shadow: rgb(0 0 0 / 0.52);
    --color-accent: #ee4d2e;
    --color-accent-strong: #d23c22;
    --color-accent-soft: #3a1f18;
    --color-success: #62ba84;
    --color-success-soft: #1c3028;
    --color-danger: #e35a5a;
    --color-danger-soft: #3a2024;
    --color-warning: #e2af50;
    --color-focus: color-mix(in srgb, var(--color-accent) 70%, white);
    --color-on-accent: #161618;
    /* Hover remains above 4.5:1 with on-accent text. Accent-strong is for borders. */
    --color-accent-hover: #f36b50;

    --font-body: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --font-code: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
    --text-small: 0.875rem;
    --text-body: 1rem;
    --text-control: 0.9375rem;
    --text-caption: 0.875rem;
    --text-section: 1.25rem;
    --text-page: 1.75rem;
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-7: 3rem;
    --radius-control: 0.5rem;
    --radius-card: 1rem;
    --radius-dialog: 1rem;
    --radius-pill: 999px;
    --border-radius-small: var(--radius-control);
    --border-radius-medium: var(--radius-control);
    --border-radius-large: var(--radius-card);
    --shadow-dialog: 0 24px 64px var(--color-shadow);
    --control-height: 44px;
    --control-padding: 0.65rem 1rem;
    --page-gutter: clamp(12px, 2vw, 24px);
    --panel-padding: clamp(16px, 3vw, 24px);
    --width-reading: 42rem;
    --width-utility: 67.5rem;
    --width-workspace: 90rem;
    --width-gallery: 107.5rem;
    --nav-height: max(56px, 3.5rem);
    background-color: var(--color-canvas);
    color: var(--color-text);
    font-family: var(--font-body);
}

/* Relative sizes preserve the hierarchy when readers enlarge text. */
@media (max-width: 800px), (any-pointer: coarse) {
    :root {
        --text-control: 1rem;
        --text-page: 1.5rem;
    }
}