:root {
    /* Paleta */
    --paleta-deep-sea: #14101f;
    --paleta-blueberry: #7c3aed;
    --paleta-salmon: #dc2626;
    --paleta-sky: #9fe3ff;
    --paleta-lilas: #c4b5fd;
    --paleta-cloudy: #eef0fc;
    --paleta-glass: #f9f9fc;
    --paleta-sunflower: #fce94a;
    --paleta-leaf: #3ecf8e;
    --paleta-sand: #fce8d6;

    /* Tipografia -- fonte geral do site (trocou de Open Sans pra Google
       Sans, pedido explícito). Geist continua definida (ver @font-face
       abaixo) só pra perfil.php resetar de volta nela (assets/css/base.css),
       sem mexer no resto do site. */
    --ff: "Google Sans", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
    --fs: 14px;
    --lh: 1.5;
    --fw-regular: 400;
    --fw-medium: 500;
    --fw-semibold: 600;
    --fw-bold: 700;

    /* Espaçamento */
    --esp-0: 0;
    --esp-1: 4px;
    --esp-2: 8px;
    --esp-3: 12px;
    --esp-4: 16px;
    --esp-5: 20px;
    --esp-6: 24px;
    --esp-7: 28px;
    --esp-8: 32px;
    --esp-9: 40px;
    --esp-10: 48px;
    --esp-11: 56px;
    --esp-12: 64px;

    /* Raio / sombra / transição / layout */
    --radius-xs: 6px;
    --radius-sm: 8px;
    --radius: 10px;
    --radius-lg: 12px;
    --radius-xl: 14px;
    --radius-pill: 999px;

    --sombra-sm: 0 1px 2px rgba(20, 16, 31, 0.06);
    --sombra: 0 4px 14px rgba(20, 16, 31, 0.08);
    --sombra-lg: 0 12px 32px rgba(20, 16, 31, 0.14);

    --t: 180ms cubic-bezier(0.22, 1, 0.36, 1);
    --container: 1000px;
    --sidebar-largura: 264px;

    /* Semântico -- claro (padrão) */
    --accent: var(--paleta-blueberry);
    --accent-texto: #ffffff;

    --bg-global: #f9f9fb;
    --panel: var(--paleta-glass);
    --panel-2: #ffffff;

    --border: #e4e5f5;
    --border-forte: #d3d5ea;

    --text: var(--paleta-deep-sea);
    --text-2: #5a5a66;
    --text-3: #8b8b98;

    --success: var(--paleta-leaf);
    --warning: var(--paleta-sunflower);
    --danger: var(--paleta-salmon);
    --info: var(--paleta-sky);

    --destaque-1: var(--paleta-lilas);
    --destaque-2: var(--paleta-sand);

    --cor-foco: var(--accent);

    --botao-brilho-alto: rgba(255, 255, 255, 0.55);
    --botao-sombra-interna: rgba(0, 0, 0, 0.22);
    --botao-sombra-externa: rgba(20, 16, 31, 0.2);

    /* Texto pequeno/secundário sobre um fundo pastel colorido (cards do
       Trending, que misturam a cor do card com --panel) -- precisa ler bem
       em cima de qualquer uma das 8 cores da paleta, então é preto
       translúcido no claro e branco translúcido no escuro (ver override
       abaixo), em vez de --text-3 (calibrado pro fundo neutro do painel). */
    --trending-texto-suave: rgba(0, 0, 0, 0.6);

    --rodape-bg: #f4f4f6;
}

/* Semântico -- escuro -- preto neutro (não mais o roxo-escuro de antes;
   --accent continua roxo, mas o fundo/painéis agora são cinza quase-preto
   sem matiz de cor, pra não competir com o accent nem parecer "modo roxo"). */
[data-tema="escuro"] {
    --bg-global: #0a0a0b;
    --panel: #161618;
    --panel-2: #1c1c1f;

    --border: rgba(255, 255, 255, 0.08);
    --border-forte: rgba(255, 255, 255, 0.14);

    --text: #f2f2f4;
    --text-2: #b3b3bb;
    --text-3: #85858e;

    --sombra-sm: 0 1px 2px rgba(0, 0, 0, 0.25);
    --sombra: 0 4px 14px rgba(0, 0, 0, 0.32);
    --sombra-lg: 0 12px 32px rgba(0, 0, 0, 0.45);

    --trending-texto-suave: rgba(255, 255, 255, 0.65);

    --rodape-bg: var(--panel-2);
}

/* Tintas em opacidade */
:root {
    --accent-06: color-mix(in srgb, var(--accent) 6%, transparent);
    --accent-10: color-mix(in srgb, var(--accent) 10%, transparent);
    --accent-16: color-mix(in srgb, var(--accent) 16%, transparent);
    --accent-24: color-mix(in srgb, var(--accent) 24%, transparent);

    --success-10: color-mix(in srgb, var(--success) 14%, transparent);
    --warning-10: color-mix(in srgb, var(--warning) 16%, transparent);
    --danger-10: color-mix(in srgb, var(--danger) 12%, transparent);
    --info-10: color-mix(in srgb, var(--info) 16%, transparent);
}

@font-face {
    font-family: "Geist";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../bibliotecas/geist/geist-latin-400-normal.woff2") format("woff2");
}

@font-face {
    font-family: "Geist";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("../bibliotecas/geist/geist-latin-500-normal.woff2") format("woff2");
}

@font-face {
    font-family: "Geist";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("../bibliotecas/geist/geist-latin-600-normal.woff2") format("woff2");
}

@font-face {
    font-family: "Geist";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("../bibliotecas/geist/geist-latin-700-normal.woff2") format("woff2");
}

body {
    background: var(--bg-global);
    color: var(--text);
    font-family: var(--ff);
    font-size: var(--fs);
    line-height: var(--lh);
    transition: background-color var(--t), color var(--t);
}

.site-conteudo {
    display: block;
    width: 100%;
    max-width: var(--container);
    margin: 0 auto;
    /* var(--panel-2), não #ffffff fixo -- em claro é a mesma cor (branco),
       zero mudança visual; em escuro vira o painel escuro em vez de deixar
       uma caixa branca acesa no meio da página (bug que só apareceu agora
       na auditoria, já que essa div praticamente só sobra vazia hoje). */
    background: var(--panel-2);
}