/* ============================================================
   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);
}

/* ── 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);
}