/* =============================================================================
   PALETA "CARD" — tema novo do Simulaked (claro + escuro)
   -----------------------------------------------------------------------------
   Nasceu do cartão de compartilhamento do resultado (_resultado-share-card.css).
   Todas as cores têm o mesmo matiz (266°) do roxo da marca #6F00FF e da lavanda
   #C396FF, só variando saturação/luminosidade — por isso combinam entre si.

   COR DA MARCA: o destaque é o próprio Electric Indigo #6F00FF (claro) — passa no
   WCAG AA como texto e como fundo de botão. No escuro ele reprova como TEXTO
   (2,9:1), então texto/ícones usam o índigo claro #A06BFF e os PREENCHIMENTOS de
   ação continuam #6F00FF com texto branco (--pc-accent-solid).

   ATIVAÇÃO: só vale quando o <html> tem data-palette="card", atributo gravado por
   /js/palette-init.js (o arquivo de switch). Com data-palette="classic" nada daqui
   se aplica e o site usa as cores originais de /css/settings/_colors.css — é o
   fallback/rollback.

   SÓ COR (spec 005): este arquivo troca tokens e, em poucos casos, a cor de um
   componente. Bordas, traços, opacidade, sombras internas, color-scheme e hovers
   ficam no CSS do componente usando os tokens de _colors.css (--alabaster-gray,
   --prata, --gray, --lavander-veil, --action-bg...), que a §3 remapeia — assim a
   estrutura vale nas duas paletas. Guarda: tests/frontend/palette-tokens-only.test.mts.

   ESPECIFICIDADE: os seletores de token são (0,2,1) para vencer tanto
   `[data-theme="dark"]` (0,1,0) quanto `:root:not([data-theme="light"])` (0,2,0)
   de _colors.css, sem depender da ordem de carregamento.

   Contrastes (WCAG) conferidos:
     escuro → texto 17,5:1 · secundário 6,5:1 · índigo claro 5,7:1 · branco no #6F00FF 6,7:1
     claro  → texto 16,8:1 · secundário 5,4:1 · #6F00FF 6,1:1      · branco no #6F00FF 6,7:1
   ============================================================================= */

/* -----------------------------------------------------------------------------
   1. Paleta base — CLARO
   ----------------------------------------------------------------------------- */
html[data-palette="card"]:not([data-theme="dark"]) {
    --pc-bg: #F6F2FA;            /* fundo da página */
    --pc-surface: #FFFFFF;       /* cards, alternativas, navbar, modais */
    --pc-surface-2: #EFEAF6;     /* hover / superfície secundária / inputs */
    --pc-text: #180F24;          /* texto principal */
    --pc-muted: #6C5E7D;         /* texto secundário, rótulos */
    --pc-faint: #E4DDEE;         /* bordas e divisórias */
    --pc-sep: #CBC1D7;           /* bordas fortes, separadores, contornos vazados */
    --pc-accent: #6F00FF;        /* Electric Indigo: texto, ícones, links, indicadores */
    --pc-accent-hover: #5A00D1;  /* hover do destaque */
    --pc-accent-solid: #6F00FF;  /* preenchimento de ação/seleção — sempre texto branco */
    --pc-accent-solid-hover: #5A00D1;
    --pc-accent-soft: rgba(111, 0, 255, 0.09); /* fundos sutis (badges, selos, hover) */
    --pc-on-accent: #FFFFFF;     /* texto sobre --pc-accent */
    --pc-on-accent-solid: #FFFFFF;
    --pc-lavender: #C396FF;      /* lavanda da marca (decorativa) */
}

/* -----------------------------------------------------------------------------
   2. Paleta base — ESCURO (exatamente as cores do cartão de compartilhamento)
   ----------------------------------------------------------------------------- */
html[data-palette="card"][data-theme="dark"] {
    --pc-bg: #0E0618;
    --pc-surface: #160C24;
    --pc-surface-2: #1E1330;
    --pc-text: #F4EEFF;
    --pc-muted: #9A8DB2;
    --pc-faint: #2A1D3D;
    --pc-sep: #4A3B63;
    --pc-accent: #A06BFF;        /* índigo claro: #6F00FF reprova como texto no escuro */
    --pc-accent-hover: #B78CFF;
    --pc-accent-solid: #6F00FF;  /* botões e seleções continuam Electric Indigo */
    --pc-accent-solid-hover: #5A00D1;
    --pc-accent-soft: rgba(111, 0, 255, 0.20);
    --pc-on-accent: #0E0618;     /* texto sobre --pc-accent (5,7:1) */
    --pc-on-accent-solid: #FFFFFF;
    --pc-lavender: #C396FF;
}

/* -----------------------------------------------------------------------------
   3. Tokens do projeto remapeados para a paleta (valem nos dois modos)
   Mesma semântica de _colors.css: --white = superfície, --black = texto,
   --lavender-mist = fundo da página (no escuro os nomes já são "invertidos").
   ----------------------------------------------------------------------------- */
html[data-palette="card"]:not([data-theme="dark"]),
html[data-palette="card"][data-theme="dark"] {
    --white: var(--pc-surface);
    --black: var(--pc-text);
    --gray: var(--pc-muted);
    --prata: var(--pc-sep);
    --alabaster-gray: var(--pc-faint);
    --lavender-mist: var(--pc-bg);
    --lavander-veil: var(--pc-surface-2);

    --indigo: var(--pc-accent);
    --eletric-indigo: var(--pc-accent);
    --bright-lavander: var(--pc-lavender);
    /* Fundo sólido usado em ~40 lugares com texto branco fixo: fica no roxo profundo
       (7:1 com branco) nos dois modos, nunca na lavanda clara. */
    --eletric-indigo-solid: var(--pc-accent-solid);
    --eletric-indigo-solid-hover: var(--pc-accent-solid-hover);
    --action-bg: var(--pc-accent-solid);
    --action-bg-hover: var(--pc-accent-solid-hover);
    --color-on-accent: #FFFFFF;
    --purple: var(--pc-accent);
    --violet: var(--pc-accent-solid);
    --gradient-indigo: linear-gradient(45deg, var(--pc-accent-solid), #8A45E6);
    --gradient-purple: linear-gradient(106deg, #5E1DB5 0%, var(--pc-accent-solid) 52%, #6420C2 100%);

    --bg-color: var(--pc-bg);
    --text-color: var(--pc-text);
    --navbar-bg: var(--pc-surface);
    --card-bg: var(--pc-surface);
    --accent-color: var(--pc-accent);
    --input-bg: var(--pc-surface-2);

    --navbar-dropdown-hover-bg: var(--pc-accent-soft);
    --navbar-dropdown-title-hover: var(--pc-accent);

    --cc-bg: var(--pc-surface);
    --cc-text: var(--pc-text);
    --cc-accent: var(--pc-accent);
    --cc-border: var(--pc-faint);

    background-color: var(--pc-bg);
}

html[data-palette="card"][data-theme="dark"] {
    --dark-inverse: invert(1);
}

html[data-palette="card"]:not([data-theme="dark"]) {
    --dark-inverse: invert(0);
}

html[data-palette="card"] body {
    background-color: var(--pc-bg);
}

/* -----------------------------------------------------------------------------
   4. Botões de ação e estados preenchidos
   Sem regras aqui: os componentes usam --action-bg / --action-bg-hover (e
   --eletric-indigo-solid-hover no .home-cta sólido), que a §3 troca por sólido.
   ----------------------------------------------------------------------------- */

/* -----------------------------------------------------------------------------
   5. Navbar
   ----------------------------------------------------------------------------- */
html[data-palette="card"] .navbar {
    background-color: var(--pc-bg);
}

/* -----------------------------------------------------------------------------
   6. Página de resultado
   Gabarito com a mesma lógica da grade do cartão: preenchido = correta,
   vazado = alternativa marcada errada.
   ----------------------------------------------------------------------------- */
html[data-palette="card"] .resultado__alternativa-button--correta,
html[data-palette="card"] .resultado__alternativa-button--errada.resultado__alternativa-button--correta {
    background-color: var(--pc-accent);
    border-color: var(--pc-accent);
    color: var(--pc-on-accent);
}

html[data-palette="card"] .resultado__alternativa-button--correta span,
html[data-palette="card"] .resultado__alternativa-button--correta .resultado__alternativa-texto {
    color: var(--pc-on-accent);
}

html[data-palette="card"] .resultado__alternativa-button.resultado__alternativa-button--correta .resultado__alternativa-letra {
    background-color: var(--pc-on-accent);
    color: var(--pc-accent);
}

html[data-palette="card"] .resultado__resumo-box,
html[data-palette="card"] .resultado__refazer {
    border-top-color: var(--pc-faint);
}

html[data-palette="card"] .resultado__percent-number {
    color: var(--pc-text);
}

html[data-palette="card"] .resultado__pontos-text {
    color: var(--pc-accent);
}

html[data-palette="card"] .resultado__xp-badge {
    background: var(--pc-accent-soft);
    color: var(--pc-accent);
}

html[data-palette="card"] .resultado__refazer-subtitle {
    color: var(--pc-muted);
}

/* -----------------------------------------------------------------------------
   7. Aviso de cookies
   _cookie-consent.css é injetado depois pelo init-app.js; os seletores aqui são
   mais específicos para vencer independente da ordem.
   ----------------------------------------------------------------------------- */
html[data-palette="card"] #simulaked-cookie-consent p {
    color: var(--pc-muted);
}

html[data-palette="card"] #simulaked-cookie-consent a {
    color: var(--pc-accent);
}

html[data-palette="card"] .cc-actions .cc-accept,
html[data-palette="card"] .cc-save .cc-save-btn {
    background: var(--pc-accent-solid);
    border-color: var(--pc-accent-solid);
    color: var(--pc-on-accent-solid);
}

html[data-palette="card"] .cc-actions .cc-reject {
    background: var(--pc-surface-2);
    color: var(--pc-text);
}

html[data-palette="card"] .cc-config-row {
    border-top-color: var(--pc-faint);
}

/* -----------------------------------------------------------------------------
   8. Configurações e modal de idioma/plano — opção selecionada
   ----------------------------------------------------------------------------- */
html[data-palette="card"] .idioma-select__button.active,
html[data-palette="card"] .plan-select__button.active {
    border-color: var(--pc-accent);
    box-shadow: 0 0 0 0.18vw var(--pc-accent-soft);
}

html[data-palette="card"] .select-tema__setup .idioma-select__button.active,
html[data-palette="card"] .select-idioma__setup .idioma-select__button.active {
    background: var(--pc-accent-solid);
    color: var(--pc-on-accent-solid);
}