/* Theme Engine — presets aplicados via [data-theme].
   A fonte dos temas é THEME_REGISTRY (core/context_processors.py): cada id
   vira um seletor [data-theme="<id>"] aqui; config/saas.yaml["theme"] define
   default e subset do seletor. Sem data-theme, prevalece o :root de tokens.css.
   O atributo funciona em QUALQUER elemento (não só <html>) — subárvores podem
   carregar um tema distinto, ex.: previews lado a lado na página /design/. */

[data-theme] body {
    transition: background-color var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard);
}

@media (prefers-reduced-motion: reduce) {
    [data-theme] body {
        transition: none;
    }
}

/* ── Executive: navy profissional, canvas off-white ── */

[data-theme="executive"] {
    color-scheme: light;
    --canvas: #f6f8fb;
    --surface: #ffffff;
    --text-primary: #16212e;
    --text-secondary: #3d4a5c;
    --text-tertiary: #5a6a7e;
    /* WCAG AA ≥4.5:1 (muted 5.09/5.41, faint 4.72/5.02, accent 5.49/5.84
       sobre canvas/surface — fix transplantado do ux-contrast medido). */
    --text-muted: #5f6b7c;
    --text-faint: #66707e;
    --accent: #0065bd;
    --accent-hover: #0053a0;
    --accent-bg: rgba(0, 101, 189, 0.08);
    --accent-border: rgba(0, 101, 189, 0.22);
    --accent-ghost-bg: rgba(0, 101, 189, 0.04);
    --border: rgba(22, 33, 46, 0.1);
    --border-strong: rgba(22, 33, 46, 0.16);
    --status-bg: rgba(22, 33, 46, 0.05);
    --danger: #c53030;
    --danger-bg: rgba(197, 48, 48, 0.08);
}

/* ── Obsidian Emerald: dark sofisticado, acento esmeralda ── */

[data-theme="obsidian-emerald"] {
    color-scheme: dark;
    --canvas: #121316;
    --surface: #1a1c20;
    --text-primary: #f2f4f7;
    --text-secondary: #a2a8b3;
    /* AA sobre surface #1a1c20 (piso do preset): 4.79/4.71/4.53. */
    --text-tertiary: #828894;
    --text-muted: #818790;
    --text-faint: #7e848e;
    --accent: #10b981;
    --accent-hover: #34d399;
    --accent-bg: rgba(16, 185, 129, 0.14);
    --accent-border: rgba(16, 185, 129, 0.35);
    --accent-ghost-bg: rgba(16, 185, 129, 0.07);
    --border: rgba(255, 255, 255, 0.08);
    --border-strong: rgba(255, 255, 255, 0.14);
    --status-bg: rgba(255, 255, 255, 0.06);
    --danger: #f87171;
    --danger-bg: rgba(248, 113, 113, 0.12);
    /* Vars do :root calibradas p/ light: em dark, texto sobre accent usa
       "knockout" (canvas), success clareia, danger-border acompanha --danger. */
    --text-on-accent: var(--canvas);
    --success: #34d399;
    --success-bg: rgba(52, 211, 153, 0.14);
    --success-border: rgba(52, 211, 153, 0.35);
    --danger-border: rgba(248, 113, 113, 0.35);
    --warning-border: rgba(251, 191, 36, 0.35);
    /* Anel do spinner acompanha o segmento "knockout" (escuro); scrim mais
       fechado para separar o modal do canvas já escuro. */
    --spinner-arc: rgba(0, 0, 0, 0.3);
    --scrim: rgba(0, 0, 0, 0.6);
    /* Warning clareia no dark; sombra reforçada para a elevação "cabelo"
       continuar legível sobre o canvas escuro. */
    --warning: #fbbf24;
    --warning-bg: rgba(251, 191, 36, 0.14);
    --shadow-color: rgba(0, 0, 0, 0.45);
}

/* ── Amber Editorial: papel estilo Notion, acento âmbar ── */

[data-theme="amber-editorial"] {
    color-scheme: light;
    --canvas: #fbfaf8;
    --surface: #ffffff;
    --text-primary: #37352f;
    --text-secondary: #6b665e;
    /* AA sobre canvas #fbfaf8 (piso do preset): 5.07/4.71/4.64. */
    --text-tertiary: #716b60;
    --text-muted: #767065;
    --text-faint: #777166;
    --accent: #b45309;
    --accent-hover: #92400e;
    --accent-bg: rgba(180, 83, 9, 0.09);
    --accent-border: rgba(180, 83, 9, 0.25);
    --accent-ghost-bg: rgba(180, 83, 9, 0.05);
    --border: rgba(55, 53, 47, 0.1);
    --border-strong: rgba(55, 53, 47, 0.16);
    --status-bg: rgba(55, 53, 47, 0.05);
    --danger: #b91c1c;
    --danger-bg: rgba(185, 28, 28, 0.08);
}

/* ── Indigo Clean: ardósia escura + índigo (Linear/Raycast) ── */

[data-theme="indigo-clean"] {
    color-scheme: dark;
    --canvas: #0f1218;
    --surface: #161a22;
    --text-primary: #edeff5;
    --text-secondary: #a3a9b8;
    /* AA sobre surface #161a22 (piso do preset): texto 4.91/4.71/4.58;
       accent #6366f1 media 3.90 → #818cf8 sobe p/ 5.84. */
    --text-tertiary: #828897;
    --text-muted: #7f8593;
    --text-faint: #7d8390;
    --accent: #818cf8;
    --accent-hover: #a5b4fc;
    --accent-bg: rgba(129, 140, 248, 0.15);
    --accent-border: rgba(129, 140, 248, 0.38);
    --accent-ghost-bg: rgba(129, 140, 248, 0.07);
    --border: rgba(255, 255, 255, 0.07);
    --border-strong: rgba(255, 255, 255, 0.13);
    --status-bg: rgba(255, 255, 255, 0.05);
    --danger: #f87171;
    --danger-bg: rgba(248, 113, 113, 0.12);
    --text-on-accent: var(--canvas);
    --success: #4ade80;
    --success-bg: rgba(74, 222, 128, 0.12);
    --success-border: rgba(74, 222, 128, 0.35);
    --danger-border: rgba(248, 113, 113, 0.35);
    --warning-border: rgba(251, 191, 36, 0.35);
    --spinner-arc: rgba(0, 0, 0, 0.3);
    --scrim: rgba(0, 0, 0, 0.6);
    --warning: #fbbf24;
    --warning-bg: rgba(251, 191, 36, 0.14);
    --shadow-color: rgba(0, 0, 0, 0.45);
}

/* ── High Contrast: light AAA-leaning (texto ≥7:1, accent ≥4.5:1, borders fortes) ── */

[data-theme="high-contrast"] {
    color-scheme: light;
    --canvas: #ffffff;
    --surface: #ffffff;
    --text-primary: #0a0c0f;
    --text-secondary: #23272e;
    --text-tertiary: #343a43;
    --text-muted: #454c56;
    --text-faint: #4d545e;
    --accent: #0b4fbb;
    --accent-hover: #084298;
    --accent-bg: rgba(11, 79, 187, 0.1);
    --accent-border: rgba(11, 79, 187, 0.4);
    --accent-ghost-bg: rgba(11, 79, 187, 0.06);
    --border: rgba(10, 12, 15, 0.35);
    --border-strong: rgba(10, 12, 15, 0.55);
    --status-bg: rgba(10, 12, 15, 0.08);
    --danger: #a51212;
    --danger-bg: rgba(165, 18, 18, 0.1);
    /* AAA-leaning também nos semânticos: success escuro e danger-border forte. */
    --success: #146c2e;
    --success-border: rgba(20, 108, 46, 0.4);
    --danger-border: rgba(165, 18, 18, 0.4);
    --warning-border: rgba(124, 45, 18, 0.4);
    /* Scrim mais fechado: modal sobre canvas branco pede separação forte. */
    --scrim: rgba(10, 12, 15, 0.55);
    /* Warning escuro o bastante para texto AA sobre --warning-bg claro. */
    --warning: #7c2d12;
    --warning-bg: rgba(124, 45, 18, 0.08);
}

/* ── Seletor de tema (components/_theme_selector.html) ── */

.theme-selector {
    position: relative;
    display: inline-block;
}

.theme-selector-toggle {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-height: var(--touch-target);
    font-family: inherit;
    font-size: var(--fs-sm);
    font-weight: 500;
    color: var(--text-tertiary);
    background: transparent;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: var(--space-1) 10px;
    cursor: pointer;
    transition: color var(--dur-fast) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard);
}

.theme-selector-toggle:hover {
    color: var(--text-primary);
    border-color: var(--border-strong);
}

.theme-selector-toggle:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.theme-selector-dot {
    width: 10px;
    height: 10px;
    border-radius: var(--radius-full);
    background: var(--swatch, var(--accent));
    flex: none;
}

.theme-selector-caret {
    flex: none;
}

.theme-selector-menu {
    position: absolute;
    right: 0;
    top: calc(100% + 6px);
    min-width: 180px;
    margin: 0;
    padding: var(--space-1);
    list-style: none;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-3);
    z-index: var(--z-menu);
}

.theme-selector-option {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: var(--space-9);
    padding: var(--space-2) 10px;
    font-size: var(--fs-sm);
    color: var(--text-secondary);
    border-radius: var(--radius-md);
    cursor: pointer;
}

.theme-selector-option:hover,
.theme-selector-option:focus,
.theme-selector-option:focus-visible {
    background: var(--status-bg);
    color: var(--text-primary);
    outline: none;
}

.theme-selector-option[aria-selected="true"] {
    color: var(--text-primary);
    font-weight: 500;
}

.theme-selector-check {
    margin-left: auto;
    flex: none;
    color: var(--accent);
    visibility: hidden;
}

.theme-selector-option[aria-selected="true"] .theme-selector-check {
    visibility: visible;
}