/*
 * Sift themes
 *
 * Each theme is a set of the semantic tokens declared in ui-primitives.css,
 * switched with <html data-theme="…">. "dark" (the :root default) and "light"
 * live in ui-primitives.css; the themes below build on them. Selectors are
 * anchored on :root because the theme picker's buttons carry data-theme too.
 *
 *   midgray  — neutral gray at mid luminance, from the "Mid Gray" VS Code theme
 *              (my-ai-skills/vscode-theme-creator/assets/midgray.json).
 *   autumn   — walnut surfaces with pumpkin and amber accents, from
 *              "Autumn Medium (Høst Mellom)" (assets/autumn-medium.json).
 *   crystal  — Mediterranean azure on chalk white with Apple-style glass
 *              buttons (translucency, blur, specular highlight).
 *
 * Fills in midgray and autumn are pastel, so text on them uses the dark
 * --on-accent; crystal fills are deep azure and keep white text. Text/surface
 * pairs are at or above WCAG AA (4.5:1).
 */

/* ------------------------------------------------------------------ */
/* Mid Gray                                                            */
/* ------------------------------------------------------------------ */
:root[data-theme="midgray"] {
    color-scheme: dark;
    --bg-dark: #3f3f3f;
    --bg-card: #4d4d4d;
    --text-primary: #f5f5f5;
    --text-secondary: #d0d0d0;
    --accent: #bcd4ff;
    --success: #c2ec9c;
    --success-action: #c2ec9c;
    --warning: #ffe08a;
    --danger: #ffb0b0;
    --purple: #d4c6ff;
    --pink: #f5bcd8;
    --teal: #9ce8d2;
    --orange: #ffc89a;
    --interactive-primary: #bcd4ff;
    --interactive-primary-hover: #d4e3ff;
    --interactive-secondary: #d4c6ff;
    --destructive: #ffb0b0;
    --destructive-hover: #ffc7c7;
    --on-accent: #1a1a1a;
    --on-warning: #1a1a1a;
    --focus-inner: #0d0d0d;
    --focus-outer: #f5f5f5;
    --border-subtle: rgba(255, 255, 255, 0.1);
    --border-medium: rgba(255, 255, 255, 0.16);
    --border-strong: rgba(255, 255, 255, 0.24);
    --hover-bg: rgba(255, 255, 255, 0.1);
    --surface-elevated: rgba(255, 255, 255, 0.06);
    --surface-overlay: rgba(63, 63, 63, 0.9);
    --chip-ink: 42%;
    --chip-tint: 15%;
}

/* ------------------------------------------------------------------ */
/* Autumn (Høst Mellom)                                                */
/* ------------------------------------------------------------------ */
:root[data-theme="autumn"] {
    color-scheme: dark;
    --bg-dark: #4e372d;
    --bg-card: #62473b;
    --text-primary: #faead0;
    --text-secondary: #d2bfaf;
    --accent: #f8b56f;
    --success: #b8dc78;
    --success-action: #b8dc78;
    --warning: #f4c658;
    --danger: #ffaea4;
    --purple: #e8b5c7;
    --pink: #f8bece;
    --teal: #8edec6;
    --orange: #e88840;
    --interactive-primary: #e88840;
    --interactive-primary-hover: #f8b56f;
    --interactive-secondary: #e8b5c7;
    --destructive: #ffaea4;
    --destructive-hover: #ffc4bc;
    --on-accent: #1e120c;
    --on-warning: #1e120c;
    --focus-inner: #1e120c;
    --focus-outer: #f8b56f;
    --border-subtle: rgba(250, 234, 208, 0.1);
    --border-medium: rgba(250, 234, 208, 0.16);
    --border-strong: rgba(250, 234, 208, 0.24);
    --hover-bg: rgba(250, 234, 208, 0.1);
    --surface-elevated: rgba(250, 234, 208, 0.06);
    --surface-overlay: rgba(78, 55, 45, 0.92);
    --chip-ink: 42%;
    --chip-tint: 15%;
}

/* Shared refinements for the mid-luminance themes: a hairline outline on
   Undo instead of a bright ring, and a quiet, legible disabled state. */
:root:is([data-theme="midgray"], [data-theme="autumn"]) .btn-undo {
    background: var(--surface-elevated);
    border-color: var(--border-strong);
}

:root:is([data-theme="midgray"], [data-theme="autumn"]) .btn-apply:disabled {
    background: var(--hover-bg);
    color: var(--text-secondary);
    opacity: 1;
}

:root:is([data-theme="midgray"], [data-theme="autumn"]) .folder-btn {
    background: var(--surface-elevated);
    border-color: var(--border-medium);
}

:root:is([data-theme="midgray"], [data-theme="autumn"]) .folder-btn:hover {
    background: var(--hover-bg);
}

/* ------------------------------------------------------------------ */
/* Crystal Blue (Mediterranean azure)                                  */
/*   60% chalk/alice-blue base, 30% azure, 10% lemon/terracotta/olive. */
/* ------------------------------------------------------------------ */
:root[data-theme="crystal"] {
    color-scheme: light;
    --bg-dark: #eaf5fd;
    --bg-card: #ffffff;
    --text-primary: #0b2a4a;
    --text-secondary: #4b6584;
    --accent: #0068d6;
    --success: #2f7a3a;
    --success-action: #2f7a3a;
    --warning: #f4d03f;
    --danger: #c0265b;
    --purple: #6d4fd1;
    --pink: #c0265b;
    --teal: #0b7f95;
    --orange: #b8662a;
    --interactive-primary: #0059c9;
    --interactive-primary-hover: #0038a8;
    --interactive-secondary: #0b7f95;
    --destructive: #b3214f;
    --destructive-hover: #94193f;
    --on-accent: #ffffff;
    --on-warning: #0b2a4a;
    --focus-inner: #0038a8;
    --focus-outer: #ffffff;
    --border-subtle: rgba(0, 56, 168, 0.1);
    --border-medium: rgba(0, 56, 168, 0.16);
    --border-strong: rgba(0, 56, 168, 0.24);
    --hover-bg: rgba(0, 127, 255, 0.08);
    --surface-elevated: rgba(255, 255, 255, 0.55);
    --surface-overlay: rgba(240, 248, 255, 0.78);
    --chip-ink: 50%;
    --chip-tint: 16%;

    --glass-fill: rgba(255, 255, 255, 0.55);
    --glass-border: rgba(255, 255, 255, 0.75);
    --glass-blur: blur(18px) saturate(180%);
    --glass-shadow: 0 8px 32px rgba(0, 56, 168, 0.12);
    /* Soft specular falloff, not the hard half-split of old Aqua gel:
       a bright lip at the top edge fading out by mid-height, plus a faint
       caustic glow returning at the bottom edge. */
    --glass-sheen:
        radial-gradient(120% 60% at 50% 0%, rgba(255, 255, 255, 0.42), rgba(255, 255, 255, 0) 70%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0) 55%, rgba(255, 255, 255, 0.10) 100%);
    --glass-edge:
        inset 0 1px 0 rgba(255, 255, 255, 0.75),
        inset 0 0 0 1px rgba(255, 255, 255, 0.22),
        inset 0 -1px 1px rgba(0, 40, 120, 0.10);
    --glass-lift: 0 1px 1px rgba(0, 40, 120, 0.06), 0 6px 18px -6px rgba(0, 56, 168, 0.22);
}

/* Sunlit water behind the glass: sky azure at the top, turquoise shallows below. */
:root[data-theme="crystal"] body {
    background:
        radial-gradient(1200px 600px at 10% -10%, rgba(135, 206, 235, 0.55), transparent 60%),
        radial-gradient(900px 500px at 110% 110%, rgba(64, 200, 210, 0.28), transparent 60%),
        linear-gradient(180deg, #f0f8ff 0%, #e3f1fc 100%);
    background-attachment: fixed;
}

/* Frosted chrome and cards */
:root[data-theme="crystal"] :is(.header, .nav-bar, .folder-actions, .email-card, .modal) {
    background: var(--glass-fill);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
    border-color: var(--glass-border);
}

:root[data-theme="crystal"] .email-card {
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid var(--glass-border);
    box-shadow: var(--glass-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

:root[data-theme="crystal"] .modal {
    background: rgba(255, 255, 255, 0.84);
}

:root[data-theme="crystal"] .modal-overlay {
    background: rgba(11, 42, 74, 0.35);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}

/* Crystal glass buttons.
 * The sheen is a background-image layered over whatever background-color the
 * button already has (often set inline), so azure, olive and terracotta fills
 * all turn into tinted glass while transparent buttons become clear glass.
 * Add .sift-plain to a button to opt it out.
 * Buttons get no backdrop-filter of their own: dozens of blurred layers
 * inside a frosted, scrolling modal (the More… folder list) make Chrome and
 * Safari skip painting some rows until hovered. The surfaces behind them are
 * already frosted, so the sheen alone reads as glass.
 * !important is needed to beat inline `background:` shorthands, which reset
 * background-image. */
:root[data-theme="crystal"] :where(button, .btn, [role="button"]):not(.sift-plain) {
    background-image: var(--glass-sheen) !important;
    transition: transform 0.15s ease, box-shadow 0.2s ease, filter 0.2s ease;
}

:root[data-theme="crystal"] :where(button, .btn, [role="button"]):not(.sift-plain):not(:focus-visible) {
    box-shadow: var(--glass-edge), var(--glass-lift);
}

:root[data-theme="crystal"] :where(button, .btn, [role="button"]):not(.sift-plain):hover:not(:disabled) {
    filter: brightness(1.04) saturate(1.08);
}

:root[data-theme="crystal"] :where(button, .btn, [role="button"]):not(.sift-plain):active:not(:disabled) {
    transform: scale(0.97);
    filter: brightness(0.97);
}

/* Disabled glass goes clear and quiet rather than muddy grey. */
:root[data-theme="crystal"] :where(button, .btn):disabled {
    background-color: rgba(75, 101, 132, 0.18) !important;
    color: var(--text-secondary) !important;
    opacity: 1 !important;
}

:root[data-theme="crystal"] :where(button, .btn):disabled:not(:focus-visible) {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), inset 0 0 0 1px rgba(0, 56, 168, 0.08);
}

/* Outline buttons (Undo) become clear glass with a hairline edge. */
:root[data-theme="crystal"] .btn-undo {
    background-color: rgba(255, 255, 255, 0.55);
    border-color: rgba(0, 56, 168, 0.18);
    color: var(--text-primary);
}

/* Category tiles: frosted glass; the colour sits in the icon chip. */
:root[data-theme="crystal"] .folder-btn {
    background-color: rgba(255, 255, 255, 0.58);
    border-color: rgba(255, 255, 255, 0.85);
}

:root[data-theme="crystal"] .folder-btn:hover {
    background-color: rgba(255, 255, 255, 0.85);
}

:root[data-theme="crystal"] .folder-btn .icon {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

:root[data-theme="crystal"] .email-preview {
    background: rgba(0, 104, 214, 0.05);
    border: 1px solid var(--border-subtle);
}

/* Segmented toggles (theme, batch size, view mode): frosted track, raised glass pill */
:root[data-theme="crystal"] .theme-toggle {
    background: rgba(255, 255, 255, 0.45);
    border: 1px solid var(--glass-border);
    box-shadow: inset 0 1px 2px rgba(0, 56, 168, 0.08);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
}

:root[data-theme="crystal"] .theme-toggle .theme-btn:not(.active):not(:focus-visible) {
    background-image: none !important;
    box-shadow: none;
}

:root[data-theme="crystal"] .theme-btn.active {
    background-color: rgba(255, 255, 255, 0.9);
    color: var(--interactive-primary-hover);
}

/* Bottom nav icons stay quiet until active */
:root[data-theme="crystal"] .nav-btn:not(.active):not(:focus-visible) {
    background-image: none !important;
    box-shadow: none;
}

:root[data-theme="crystal"] :is(.folder-settings-item, .settings-section) {
    background: rgba(255, 255, 255, 0.66);
    border: 1px solid var(--glass-border);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
    box-shadow: 0 6px 24px -10px rgba(0, 56, 168, 0.18);
}

:root[data-theme="crystal"] .account-btn {
    background-color: rgba(255, 255, 255, 0.62);
    border: 1px solid var(--glass-border);
}

/* ------------------------------------------------------------------ */
/* Theme picker swatches                                               */
/* ------------------------------------------------------------------ */
.theme-swatch {
    display: inline-block;
    width: 12px;
    height: 12px;
    margin-right: 6px;
    border-radius: 50%;
    vertical-align: -1px;
    border: 1px solid rgba(127, 127, 127, 0.5);
}

.theme-swatch.dark { background: linear-gradient(135deg, #0f172a 50%, #3b82f6 50%); }
.theme-swatch.light { background: linear-gradient(135deg, #ffffff 50%, #3b82f6 50%); }
.theme-swatch.midgray { background: linear-gradient(135deg, #4d4d4d 50%, #bcd4ff 50%); }
.theme-swatch.autumn { background: linear-gradient(135deg, #62473b 50%, #e88840 50%); }
.theme-swatch.crystal {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0) 55%),
        linear-gradient(135deg, #87ceeb, #007fff 60%, #0038a8);
}