/* mailx design tokens -- all theming via custom properties */
/* Theme controlled by class on <html>: theme-dark, theme-light, or absent (system) */

:root {
    /* Layout */
    --rail-width: 44px;            /* vertical icon rail (Thunderbird/Dovecot style) */
    --folder-width: 220px;
    --toolbar-height: 44px;
    --statusbar-height: 24px;
    --splitter-size: 5px;
    --list-viewer-split: 40%;

    /* Colors — dark by default */
    --color-brand: oklch(0.88 0.04 240);
    --color-brand-dark: oklch(0.45 0.10 240);
    --color-bg: oklch(0.20 0.02 270);
    --color-bg-surface: oklch(0.25 0.03 270);
    --color-bg-hover: color-mix(in oklch, var(--color-bg-surface) 80%, white);
    --color-bg-selected: var(--color-brand);
    --color-bg-toolbar: oklch(0.22 0.02 270);
    --color-text: oklch(0.92 0.01 270);
    --color-text-muted: oklch(0.68 0.02 270);
    --color-accent: var(--color-brand-dark);
    --color-unread: oklch(0.95 0.02 270);
    --color-border: oklch(0.40 0.02 270);
    --color-danger: oklch(0.65 0.15 15);
    --color-success: oklch(0.65 0.15 145);
    --color-badge: oklch(0.60 0.18 250);
    /* Flag star when set — gold/amber (oklch hue 60). Shared by the
       message-list row star and the message-viewer toolbar Flag button
       so the two always render the identical colour. */
    --color-flag-star: oklch(0.70 0.18 60);

    /* Typography */
    --font-ui: "Segoe UI", system-ui, -apple-system, sans-serif;
    --font-mono: "Cascadia Code", Consolas, monospace;
    --font-size-sm: 0.9rem;
    --font-size-base: 0.95rem;
    --font-size-lg: 1.1rem;
    --line-height: 1.45;

    /* Spacing */
    --gap-xs: 0.25rem;
    --gap-sm: 0.5rem;
    --gap-md: 0.75rem;
    --gap-lg: 1rem;

    /* Radii */
    --radius-sm: 3px;
    --radius-md: 6px;

    color-scheme: dark light;
}

/* Light overrides */
.theme-light {
    --color-bg: oklch(0.97 0.005 270);
    --color-bg-surface: oklch(1.0 0 0);
    --color-bg-hover: oklch(0.95 0.005 270);
    --color-brand: oklch(0.88 0.04 240);
    --color-brand-dark: oklch(0.35 0.12 240);
    --color-bg-selected: var(--color-brand);
    --color-bg-toolbar: oklch(0.95 0.005 270);
    --color-text: oklch(0.20 0.02 270);
    --color-text-muted: oklch(0.45 0.02 270);
    --color-accent: var(--color-brand-dark);
    --color-unread: oklch(0.10 0.02 270);
    --color-border: oklch(0.85 0.01 270);
    color-scheme: light;
}

/* System preference: light — apply when no explicit theme class */
@media (prefers-color-scheme: light) {
    :root:not(.theme-dark):not(.theme-light) {
        --color-bg: oklch(0.97 0.005 270);
        --color-bg-surface: oklch(1.0 0 0);
        --color-bg-hover: oklch(0.95 0.005 270);
        --color-brand: oklch(0.88 0.04 240);
        --color-brand-dark: oklch(0.35 0.12 240);
        --color-bg-selected: var(--color-brand);
        --color-bg-toolbar: oklch(0.95 0.005 270);
        --color-text: oklch(0.20 0.02 270);
        --color-text-muted: oklch(0.45 0.02 270);
        --color-accent: var(--color-brand-dark);
        --color-unread: oklch(0.10 0.02 270);
        --color-border: oklch(0.85 0.01 270);
        color-scheme: light;
    }
}
