/* ============================================================
   Abba — Design Tokens
   Variáveis CSS globais: cores, tipografia, espaçamento, sombras.
   Importar antes de qualquer outro CSS.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500&display=swap');

:root {
  /* ── Cores primárias ── */
  --color-primary:        #7C5CBF; /* Púrpura — cor principal */
  --color-primary-dark:   #2A1A4E; /* Noturno — fundo do timer de oração */
  --color-primary-light:  #F0E8FF; /* Névoa — backgrounds suaves */
  --color-primary-hover:  #6A4EAB; /* Estado hover de botões primários */

  /* ── Cor de acento ── */
  --color-accent:         #C49A3C; /* Âmbar — calor, destaques */
  --color-accent-light:   #FFF4E0; /* Ouro suave — badges premium */
  --color-accent-hover:   #A8832E;

  /* ── Semânticas ── */
  --color-success:        #1D6B44;
  --color-success-light:  #E6F4EE;
  --color-error:          #C0392B;
  --color-error-light:    #FDECEA;
  --color-warning:        #9B6000;
  --color-warning-light:  #FFF3CD;

  /* ── Neutras (light mode padrão) ── */
  --color-bg:             #FFFFFF;
  --color-bg-secondary:   #F7F5FC;
  --color-bg-tertiary:    #EDE8F5;
  --color-text:           #1A1A2E;
  --color-text-secondary: #6B6B8A;
  --color-text-tertiary:  #73738c; /* antes #9999B3 — contraste ~4.6:1 em fundo branco (WCAG AA) */
  --color-border:         #E8E4F3;
  --color-border-strong:  #C8C0E0;

  /* ── Tokens semânticos do sistema de temas ── */
  /* Aliases que os temas sobrescrevem diretamente.              */
  /* Código antigo (--color-primary, etc.) continua funcionando  */
  /* pois os temas sobrescrevem as variáveis originais também.   */
  --color-brand:       var(--color-primary);       /* Cor de marca — muda por tema */
  --color-sidebar:     var(--color-bg-secondary);  /* Fundo de cards e áreas secundárias */
  --color-text-muted:  var(--color-text-secondary);
  --color-accent2:     #0ea5e9;                    /* Segundo acento — cor complementar */
  --color-badge-bg:    var(--color-primary-light); /* Fundo de badges e chips */
  --color-vnum:        var(--color-text-tertiary); /* Número do versículo */
  --color-highlighted: var(--color-primary-light); /* Versículo em destaque (TTS ativo) */
  --color-focus-ring:  rgba(124, 92, 191, 0.18);  /* Anel de foco nos inputs */
  --color-timer-end:   #3D2A70;                   /* Segunda cor do gradiente do timer */
  --primary:           var(--color-primary);
  --accent:            #F59E0B;
  --bg-primary:        var(--color-bg);
  --color-background-primary: var(--color-bg);

  /* ── Tipografia ── */
  --font-sans:          'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-serif:         'Lora', Georgia, serif;

  --text-display:       28px;
  --text-title:         20px;
  --text-subtitle:      17px;
  --text-body:          15px;
  --text-small:         13px;
  --text-caption:       12px;
  --text-micro:         11px;

  --weight-regular:     400;
  --weight-medium:      500;

  --line-height-reading: 1.75; /* leitura bíblica */
  --line-height-ui:      1.4;  /* elementos de interface */

  /* ── Espaçamento ── */
  --space-xs:   4px;
  --space-sm:   8px;
  --space-md:   16px;
  --space-lg:   24px;
  --space-xl:   40px;
  --space-2xl:  64px;

  /* ── Bordas ── */
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   14px;
  --radius-xl:   20px;
  --radius-full: 9999px;

  /* ── Sombras ── */
  --shadow-sm:  0 1px 3px rgba(44, 20, 80, 0.08);
  --shadow-md:  0 4px 16px rgba(44, 20, 80, 0.12);
  --shadow-lg:  0 8px 32px rgba(44, 20, 80, 0.16);

  /* ── Transições ── */
  --transition-fast:   150ms ease;
  --transition-normal: 250ms ease;
  --transition-slow:   400ms ease;

  /* ── Largura máxima do app mobile ── */
  --app-max-width: 430px;
  --nav-height:    64px;
}

[data-theme] {
  --primary:    var(--color-primary);
  --accent:     #F59E0B;
  --bg-primary: var(--color-bg);
}

/* ── Dark mode do sistema (prefers-color-scheme) ── */
@media (prefers-color-scheme: dark) {
  :root {
    --color-bg:             #0F0A1E;
    --color-bg-secondary:   #1A1130;
    --color-bg-tertiary:    #231740;
    --color-text:           #EDE8FF;
    --color-text-secondary: #A89EC8;
    --color-text-tertiary:  #8A84A8; /* antes #6B6090 — contraste ~5.5:1 em fundo escuro (WCAG AA) */
    --color-border:         #2D2350;
    --color-border-strong:  #3D3365;
    --color-primary-light:  #1E1540;
  }
}

/* Dark mode forçado via classe .dark */
.dark {
  --color-bg:             #0F0A1E;
  --color-bg-secondary:   #1A1130;
  --color-bg-tertiary:    #231740;
  --color-text:           #EDE8FF;
  --color-text-secondary: #A89EC8;
  --color-text-tertiary:  #8A84A8; /* antes #6B6090 — contraste ~5.5:1 em fundo escuro (WCAG AA) */
  --color-border:         #2D2350;
  --color-border-strong:  #3D3365;
  --color-primary-light:  #1E1540;
}

/* ============================================================
   SISTEMA DE 6 TEMAS DINÂMICOS
   Aplicados como classe no <body>. Cada tema redefine todas as
   variáveis semânticas e as originais para compatibilidade.
   ============================================================ */

/* ── Cosmic — Púrpura + azul · Escuro ── */
body.theme-cosmic {
  /* Estrutura */
  --color-bg:             #12102a;
  --color-bg-secondary:   #1a1730;
  --color-bg-tertiary:    #221f3c;
  --color-border:         #2a2448;
  --color-border-strong:  #3a3460;

  /* Marca / acento */
  --color-primary:        #7c3aed;
  --color-primary-dark:   #0d0b20;
  --color-primary-light:  rgba(124, 58, 237, 0.15);
  --color-primary-hover:  #6d28d9;
  --color-accent:         #7c3aed;
  --color-accent2:        #0ea5e9;
  --color-accent-light:   rgba(124, 58, 237, 0.15);
  --color-accent-hover:   #6d28d9;
  --color-timer-end:      #4a1d96;

  /* Texto */
  --color-text:           #ede9ff;
  --color-text-secondary: #9b93be;
  --color-text-tertiary:  #9490B8; /* antes #6b6090 — contraste ~6:1 (WCAG AA) */

  /* Aliases semânticos */
  --color-brand:       #7c3aed;
  --color-sidebar:     #1a1730;
  --color-text-muted:  #9b93be;
  --color-badge-bg:    rgba(124, 58, 237, 0.18);
  --color-vnum:        #9490B8; /* antes #6b6090 — número do versículo, contraste WCAG AA */
  --color-highlighted: rgba(124, 58, 237, 0.12);
  --color-focus-ring:  rgba(124, 58, 237, 0.25);
  --primary:           #7c3aed;
  --accent:            #F59E0B;
  --bg-primary:        #12102a;

  /* Sombras adaptadas ao fundo escuro */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.5);
}

/* ── Aurora — Índigo + dourado · Escuro ── */
body.theme-aurora {
  /* Estrutura */
  --color-bg:             #0f172a;
  --color-bg-secondary:   #151e30;
  --color-bg-tertiary:    #1c2840;
  --color-border:         #1e2a42;
  --color-border-strong:  #2a3a58;

  /* Marca / acento */
  --color-primary:        #6d28d9;
  --color-primary-dark:   #0a0f20;
  --color-primary-light:  rgba(109, 40, 217, 0.15);
  --color-primary-hover:  #5b21b6;
  --color-accent:         #6d28d9;
  --color-accent2:        #d4a853;
  --color-accent-light:   rgba(212, 168, 83, 0.15);
  --color-accent-hover:   #5b21b6;
  --color-timer-end:      #3b0764;

  /* Texto */
  --color-text:           #e2e8f0;
  --color-text-secondary: #94a3b8;
  --color-text-tertiary:  #8099B8; /* antes #5b7092 — contraste ~5.9:1 (WCAG AA) */

  /* Aliases semânticos */
  --color-brand:       #6d28d9;
  --color-sidebar:     #151e30;
  --color-text-muted:  #94a3b8;
  --color-badge-bg:    rgba(109, 40, 217, 0.18);
  --color-vnum:        #8099B8; /* antes #5b7092 — contraste WCAG AA */
  --color-highlighted: rgba(109, 40, 217, 0.12);
  --color-focus-ring:  rgba(109, 40, 217, 0.25);
  --primary:           #6d28d9;
  --accent:            #F59E0B;
  --bg-primary:        #0f172a;

  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.5);
}

/* ── Sacred — Índigo + teal · Escuro ── */
body.theme-sacred {
  /* Estrutura */
  --color-bg:             #1a1f2e;
  --color-bg-secondary:   #1f2638;
  --color-bg-tertiary:    #272e44;
  --color-border:         #272e42;
  --color-border-strong:  #343c55;

  /* Marca / acento */
  --color-primary:        #5b4fcf;
  --color-primary-dark:   #131625;
  --color-primary-light:  rgba(91, 79, 207, 0.15);
  --color-primary-hover:  #4a3ec0;
  --color-accent:         #5b4fcf;
  --color-accent2:        #2d9b83;
  --color-accent-light:   rgba(45, 155, 131, 0.15);
  --color-accent-hover:   #4a3ec0;
  --color-timer-end:      #2d2a70;

  /* Texto */
  --color-text:           #e8eaf6;
  --color-text-secondary: #8892b0;
  --color-text-tertiary:  #8A9DB8; /* antes #5e6f8a — contraste ~5.6:1 (WCAG AA) */

  /* Aliases semânticos */
  --color-brand:       #5b4fcf;
  --color-sidebar:     #1f2638;
  --color-text-muted:  #8892b0;
  --color-badge-bg:    rgba(91, 79, 207, 0.18);
  --color-vnum:        #8A9DB8; /* antes #5e6f8a — contraste WCAG AA */
  --color-highlighted: rgba(91, 79, 207, 0.12);
  --color-focus-ring:  rgba(91, 79, 207, 0.25);
  --primary:           #5b4fcf;
  --accent:            #F59E0B;
  --bg-primary:        #1a1f2e;

  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.5);
}

/* ── Dawn — Púrpura + azul · Claro ── */
body.theme-dawn {
  /* Estrutura */
  --color-bg:             #faf8f5;
  --color-bg-secondary:   #f0ede8;
  --color-bg-tertiary:    #e8e4de;
  --color-border:         #e0dbd5;
  --color-border-strong:  #cec8c0;

  /* Marca / acento */
  --color-primary:        #7c3aed;
  --color-primary-dark:   #2e1065;
  --color-primary-light:  rgba(124, 58, 237, 0.1);
  --color-primary-hover:  #6d28d9;
  --color-accent:         #7c3aed;
  --color-accent2:        #0ea5e9;
  --color-accent-light:   rgba(124, 58, 237, 0.08);
  --color-accent-hover:   #6d28d9;
  --color-timer-end:      #4a1d96;

  /* Texto */
  --color-text:           #1a1040;
  --color-text-secondary: #5a5370;
  --color-text-tertiary:  #5a5070; /* antes #9990b5 — contraste ~6.3:1 em fundo claro (WCAG AA) */

  /* Aliases semânticos */
  --color-brand:       #7c3aed;
  --color-sidebar:     #f0ede8;
  --color-text-muted:  #5a5370;
  --color-badge-bg:    rgba(124, 58, 237, 0.1);
  --color-vnum:        #5a5070; /* antes #9990b5 — contraste WCAG AA em fundo claro */
  --color-highlighted: rgba(124, 58, 237, 0.08);
  --color-focus-ring:  rgba(124, 58, 237, 0.18);
  --primary:           #7c3aed;
  --accent:            #F59E0B;
  --bg-primary:        #faf8f5;

  --shadow-sm: 0 1px 3px rgba(30, 16, 64, 0.08);
  --shadow-md: 0 4px 16px rgba(30, 16, 64, 0.12);
  --shadow-lg: 0 8px 32px rgba(30, 16, 64, 0.16);
}

/* ── Sépia — Âmbar + índigo · Claro ── */
body.theme-sepia {
  /* Estrutura */
  --color-bg:             #f5ebe0;
  --color-bg-secondary:   #ede0d4;
  --color-bg-tertiary:    #e5d5c0;
  --color-border:         #d9c9b6;
  --color-border-strong:  #c8b59f;

  /* Marca / acento */
  --color-primary:        #92400e;
  --color-primary-dark:   #451a03;
  --color-primary-light:  rgba(146, 64, 14, 0.1);
  --color-primary-hover:  #78350f;
  --color-accent:         #92400e;
  --color-accent2:        #5b4fcf;
  --color-accent-light:   rgba(146, 64, 14, 0.1);
  --color-accent-hover:   #78350f;
  --color-timer-end:      #78350f;

  /* Texto */
  --color-text:           #3b1e0a;
  --color-text-secondary: #7c5b3a;
  --color-text-tertiary:  #7a5535; /* antes #b8956a — contraste ~5.2:1 em fundo sépia (WCAG AA) */

  /* Aliases semânticos */
  --color-brand:       #92400e;
  --color-sidebar:     #ede0d4;
  --color-text-muted:  #7c5b3a;
  --color-badge-bg:    rgba(146, 64, 14, 0.12);
  --color-vnum:        #7a5535; /* antes #b8956a — contraste WCAG AA em fundo sépia */
  --color-highlighted: rgba(146, 64, 14, 0.1);
  --color-focus-ring:  rgba(146, 64, 14, 0.2);
  --primary:           #92400e;
  --accent:            #F59E0B;
  --bg-primary:        #f5ebe0;

  --shadow-sm: 0 1px 3px rgba(59, 30, 10, 0.08);
  --shadow-md: 0 4px 16px rgba(59, 30, 10, 0.12);
  --shadow-lg: 0 8px 32px rgba(59, 30, 10, 0.16);
}

/* ── Pergaminho — Bege quente + Lora · Claro ── */
body.theme-pergaminho {
  /* Estrutura */
  --color-bg:             #F5EFE0;
  --color-bg-secondary:   #EDE5CE;
  --color-bg-tertiary:    #E2D9BB;
  --color-border:         #D6C9A8;
  --color-border-strong:  #C4B490;

  /* Marca / acento */
  --color-primary:        #7C4F2A;
  --color-primary-dark:   #3D2010;
  --color-primary-light:  rgba(124, 79, 42, 0.1);
  --color-primary-hover:  #6A4020;
  --color-accent:         #7C4F2A;
  --color-accent2:        #5B4FCF;
  --color-accent-light:   rgba(124, 79, 42, 0.08);
  --color-accent-hover:   #6A4020;
  --color-timer-end:      #6A4020;

  /* Texto */
  --color-text:           #2C1810;
  --color-text-secondary: #6B4C35;
  --color-text-tertiary:  #7A5C40;

  /* Aliases semânticos */
  --color-brand:       #7C4F2A;
  --color-sidebar:     #EDE5CE;
  --color-text-muted:  #6B4C35;
  --color-badge-bg:    rgba(124, 79, 42, 0.12);
  --color-vnum:        #7A5C40;
  --color-highlighted: rgba(124, 79, 42, 0.1);
  --color-focus-ring:  rgba(124, 79, 42, 0.2);
  --primary:           #7C4F2A;
  --accent:            #F59E0B;
  --bg-primary:        #F5EFE0;

  --shadow-sm: 0 1px 3px rgba(44, 24, 16, 0.08);
  --shadow-md: 0 4px 16px rgba(44, 24, 16, 0.12);
  --shadow-lg: 0 8px 32px rgba(44, 24, 16, 0.16);
}

/* Lora serif para conteúdo de leitura — exclusivo do tema Pergaminho */
body.theme-pergaminho .reflection-content,
body.theme-pergaminho .day-reflection-body,
body.theme-pergaminho [data-reflection-paragraph] {
  font-family: var(--font-serif);
  line-height: 1.85;
}

/* ── Midnight — Violeta + ciano · Escuro profundo ── */
body.theme-midnight {
  /* Estrutura */
  --color-bg:             #0a0a0f;
  --color-bg-secondary:   #0f0f18;
  --color-bg-tertiary:    #141420;
  --color-border:         #1a1a28;
  --color-border-strong:  #252535;

  /* Marca / acento */
  --color-primary:        #8b5cf6;
  --color-primary-dark:   #050508;
  --color-primary-light:  rgba(139, 92, 246, 0.15);
  --color-primary-hover:  #7c3aed;
  --color-accent:         #8b5cf6;
  --color-accent2:        #06b6d4;
  --color-accent-light:   rgba(139, 92, 246, 0.15);
  --color-accent-hover:   #7c3aed;
  --color-timer-end:      #2e1065;

  /* Texto */
  --color-text:           #f0eeff;
  --color-text-secondary: #8880b0;
  --color-text-tertiary:  #8A84B8; /* antes #605890 — contraste ~5.8:1 (WCAG AA) */

  /* Aliases semânticos */
  --color-brand:       #8b5cf6;
  --color-sidebar:     #0f0f18;
  --color-text-muted:  #8880b0;
  --color-badge-bg:    rgba(139, 92, 246, 0.18);
  --color-vnum:        #8A84B8; /* antes #605890 — contraste WCAG AA */
  --color-highlighted: rgba(139, 92, 246, 0.12);
  --color-focus-ring:  rgba(139, 92, 246, 0.25);
  --primary:           #8b5cf6;
  --accent:            #F59E0B;
  --bg-primary:        #0a0a0f;

  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.55);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.65);
}

/* ============================================================
   VARIANTES DE MODO (data-mode="light" / data-mode="dark")
   Toggle ☀️/🌙 aplica [data-mode] no <body>.
   Temas escuros definem [data-mode="light"]; temas claros definem [data-mode="dark"].
   ============================================================ */

/* ── Cosmic light ── */
body.theme-cosmic[data-mode="light"] {
  --color-bg:             #f5f0ff;
  --color-bg-secondary:   #ede6ff;
  --color-bg-tertiary:    #e2d5ff;
  --color-border:         #d0c4f0;
  --color-border-strong:  #b8a8e8;
  --color-primary:        #7C5CBF;
  --color-primary-dark:   #2e1065;
  --color-primary-light:  rgba(124, 92, 191, 0.1);
  --color-primary-hover:  #6a4eab;
  --color-text:           #1a0a30;
  --color-text-secondary: #5a4070;
  --color-text-tertiary:  #6a508a;
  --color-brand:          #7C5CBF;
  --color-sidebar:        #ede6ff;
  --color-text-muted:     #5a4070;
  --color-badge-bg:       rgba(124, 92, 191, 0.12);
  --color-vnum:           #6a508a;
  --color-highlighted:    rgba(124, 92, 191, 0.1);
  --color-focus-ring:     rgba(124, 92, 191, 0.2);
  --primary:              #7C5CBF;
  --bg-primary:           #f5f0ff;
  --shadow-sm: 0 1px 3px rgba(44, 20, 80, 0.08);
  --shadow-md: 0 4px 16px rgba(44, 20, 80, 0.12);
  --shadow-lg: 0 8px 32px rgba(44, 20, 80, 0.16);
}

/* ── Aurora light ── */
body.theme-aurora[data-mode="light"] {
  --color-bg:             #f0f2f8;
  --color-bg-secondary:   #e4e8f4;
  --color-bg-tertiary:    #d8deee;
  --color-border:         #c8d0e8;
  --color-border-strong:  #b0bcd8;
  --color-primary:        #6d28d9;
  --color-primary-dark:   #3b0764;
  --color-primary-light:  rgba(109, 40, 217, 0.1);
  --color-primary-hover:  #5b21b6;
  --color-text:           #0a0f20;
  --color-text-secondary: #3a4060;
  --color-text-tertiary:  #4a5070;
  --color-brand:          #6d28d9;
  --color-sidebar:        #e4e8f4;
  --color-text-muted:     #3a4060;
  --color-badge-bg:       rgba(109, 40, 217, 0.12);
  --color-vnum:           #4a5070;
  --color-highlighted:    rgba(109, 40, 217, 0.1);
  --color-focus-ring:     rgba(109, 40, 217, 0.2);
  --primary:              #6d28d9;
  --bg-primary:           #f0f2f8;
  --shadow-sm: 0 1px 3px rgba(10, 15, 32, 0.08);
  --shadow-md: 0 4px 16px rgba(10, 15, 32, 0.12);
  --shadow-lg: 0 8px 32px rgba(10, 15, 32, 0.16);
}

/* ── Sacred light ── */
body.theme-sacred[data-mode="light"] {
  --color-bg:             #f0f4f8;
  --color-bg-secondary:   #e4ecf2;
  --color-bg-tertiary:    #d8e4ec;
  --color-border:         #c8d8e8;
  --color-border-strong:  #b0c4d8;
  --color-primary:        #5b4fcf;
  --color-primary-dark:   #2d2a70;
  --color-primary-light:  rgba(91, 79, 207, 0.1);
  --color-primary-hover:  #4a3ec0;
  --color-text:           #0f1520;
  --color-text-secondary: #3a4a60;
  --color-text-tertiary:  #4a5a70;
  --color-brand:          #5b4fcf;
  --color-sidebar:        #e4ecf2;
  --color-text-muted:     #3a4a60;
  --color-badge-bg:       rgba(91, 79, 207, 0.12);
  --color-vnum:           #4a5a70;
  --color-highlighted:    rgba(91, 79, 207, 0.1);
  --color-focus-ring:     rgba(91, 79, 207, 0.2);
  --primary:              #5b4fcf;
  --bg-primary:           #f0f4f8;
  --shadow-sm: 0 1px 3px rgba(15, 25, 45, 0.08);
  --shadow-md: 0 4px 16px rgba(15, 25, 45, 0.12);
  --shadow-lg: 0 8px 32px rgba(15, 25, 45, 0.16);
}

/* ── Midnight light ── */
body.theme-midnight[data-mode="light"] {
  --color-bg:             #f2f0ff;
  --color-bg-secondary:   #e8e4ff;
  --color-bg-tertiary:    #ddd8f8;
  --color-border:         #ccc4f0;
  --color-border-strong:  #b8afe8;
  --color-primary:        #8b5cf6;
  --color-primary-dark:   #2e1065;
  --color-primary-light:  rgba(139, 92, 246, 0.1);
  --color-primary-hover:  #7c3aed;
  --color-text:           #0a0810;
  --color-text-secondary: #3a3060;
  --color-text-tertiary:  #4a4070;
  --color-brand:          #8b5cf6;
  --color-sidebar:        #e8e4ff;
  --color-text-muted:     #3a3060;
  --color-badge-bg:       rgba(139, 92, 246, 0.12);
  --color-vnum:           #4a4070;
  --color-highlighted:    rgba(139, 92, 246, 0.1);
  --color-focus-ring:     rgba(139, 92, 246, 0.2);
  --primary:              #8b5cf6;
  --bg-primary:           #f2f0ff;
  --shadow-sm: 0 1px 3px rgba(10, 8, 16, 0.08);
  --shadow-md: 0 4px 16px rgba(10, 8, 16, 0.12);
  --shadow-lg: 0 8px 32px rgba(10, 8, 16, 0.16);
}

/* ── Dawn dark ── */
body.theme-dawn[data-mode="dark"] {
  --color-bg:             #1a0f08;
  --color-bg-secondary:   #241508;
  --color-bg-tertiary:    #2e1c0e;
  --color-border:         #442810;
  --color-border-strong:  #583418;
  --color-primary:        #9b6cd8;
  --color-primary-dark:   #0a0320;
  --color-primary-light:  rgba(124, 58, 237, 0.15);
  --color-primary-hover:  #8b5cc8;
  --color-text:           #f5ede0;
  --color-text-secondary: #c0a080;
  --color-text-tertiary:  #a08060;
  --color-brand:          #9b6cd8;
  --color-sidebar:        #241508;
  --color-text-muted:     #c0a080;
  --color-badge-bg:       rgba(124, 58, 237, 0.18);
  --color-vnum:           #a08060;
  --color-highlighted:    rgba(124, 58, 237, 0.15);
  --color-focus-ring:     rgba(124, 58, 237, 0.25);
  --primary:              #9b6cd8;
  --bg-primary:           #1a0f08;
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.6);
}

/* ── Sépia dark ── */
body.theme-sepia[data-mode="dark"] {
  --color-bg:             #1a0c05;
  --color-bg-secondary:   #221005;
  --color-bg-tertiary:    #2c1508;
  --color-border:         #3d2010;
  --color-border-strong:  #522a14;
  --color-primary:        #c4703a;
  --color-primary-dark:   #0a0502;
  --color-primary-light:  rgba(146, 64, 14, 0.15);
  --color-primary-hover:  #b05e2c;
  --color-text:           #f5e8d0;
  --color-text-secondary: #c09060;
  --color-text-tertiary:  #a07040;
  --color-brand:          #c4703a;
  --color-sidebar:        #221005;
  --color-text-muted:     #c09060;
  --color-badge-bg:       rgba(146, 64, 14, 0.18);
  --color-vnum:           #a07040;
  --color-highlighted:    rgba(146, 64, 14, 0.15);
  --color-focus-ring:     rgba(146, 64, 14, 0.25);
  --primary:              #c4703a;
  --bg-primary:           #1a0c05;
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.6);
}

/* ── Pergaminho dark ── */
body.theme-pergaminho[data-mode="dark"] {
  --color-bg:             #1C0E08;
  --color-bg-secondary:   #261408;
  --color-bg-tertiary:    #321A0C;
  --color-border:         #4A2810;
  --color-border-strong:  #5E3418;
  --color-primary:        #C49A3C;
  --color-primary-dark:   #0A0402;
  --color-primary-light:  rgba(196, 154, 60, 0.15);
  --color-primary-hover:  #D4A83C;
  --color-accent:         #C49A3C;
  --color-accent-light:   rgba(196, 154, 60, 0.15);
  --color-timer-end:      #6A4020;
  --color-text:           #F5EFE0;
  --color-text-secondary: #C8A87A;
  --color-text-tertiary:  #A8885A;
  --color-brand:          #C49A3C;
  --color-sidebar:        #261408;
  --color-text-muted:     #C8A87A;
  --color-badge-bg:       rgba(196, 154, 60, 0.18);
  --color-vnum:           #A8885A;
  --color-highlighted:    rgba(196, 154, 60, 0.15);
  --color-focus-ring:     rgba(196, 154, 60, 0.25);
  --primary:              #C49A3C;
  --bg-primary:           #1C0E08;
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.6);
}

/* ── Minimalista (.minimal) — toggle aditivo · dessatura o tema ativo sem sobrescrever vars ── */
/* ATENÇÃO: filter NÃO pode ser aplicado em body — CSS spec diz que filter em ancestor
   cria novo containing block para position:fixed, quebrando o posicionamento de
   #appearancePanel e outros overlays. Aplicar em #app + sidebar + painel desktop. */
body.minimal #app,
body.minimal .app-sidebar,
body.minimal #desktop-panel {
  filter: saturate(0.25) brightness(0.9);
}

/* ── Focus Mode — reduz ruído visual sem alterar cores do tema ── */

/* Sidebar completa fica semi-transparente; hover restaura visibilidade */
body.focus-mode #appSidebar {
  opacity: 0.5;
  transition: opacity 0.2s ease;
}
body.focus-mode #appSidebar:hover { opacity: 0.85; }

/* Bottom nav (mobile): mesma lógica */
body.focus-mode .nav-bar .nav-item:not(.active) {
  opacity: 0.3;
  transition: opacity 0.2s ease;
}
body.focus-mode .nav-bar .nav-item:not(.active):hover { opacity: 0.8; }
body.focus-mode .nav-bar .nav-item.active             { opacity: 1; }

/* Bordas e divisores ficam quase invisíveis */
body.focus-mode .border,
body.focus-mode hr { opacity: 0.2; }

/* Focus Mode + Minimalista: sidebar e bordas extremamente apagados */
body.focus-mode.minimal #appSidebar { opacity: 0.08; }
body.focus-mode.minimal .border,
body.focus-mode.minimal hr          { opacity: 0.05; }