/* ==========================================================================
   CC Our Story — estilos do tema
   1. Variáveis de design  2. Elementos base  3. Ícones  4. Navegação  5. Início
   6. Listas e artigos  7. Momentos  8. Recados  9. Rodapé e camadas flutuantes  10. Responsivo
   ========================================================================== */

/* 1. Variáveis de design ------------------------------------------------------------ */
:root {
    /* Paleta João & Pablo: azul (João) como cor principal, verde (Pablo) como secundária.
       As variáveis --pink* mantêm o nome original para não mexer no resto do CSS, mas agora são azul. */
    --paper: #fbfdfe;
    --surface: #ffffff;
    --surface-soft: #f7fafc;
    --surface-muted: #edf2f6;
    --ink: #2b3037;
    --muted: #6f7784;
    --faint: #a0a8b2;
    --line: rgba(40, 60, 80, .11);
    --line-strong: rgba(40, 60, 80, .17);
    --pink: #3a78c9;
    --pink-dark: #2a5ea6;
    --pink-soft: #e3edf9;
    --pink-softer: #eef4fb;
    --green: #3f9e6e;
    --green-dark: #2e7d55;
    --green-soft: #e2f2e9;
    --green-softer: #eef8f2;
    --danger: #d0455c;
    --danger-strong: #b3374c;
    --danger-soft: #fdecef;
    --danger-ink: #ffffff;
    --skeleton-sheen: rgba(255, 255, 255, .78);
    --footer-bg: #1f2a36;
    --footer-ink: #ffffff;
    --shadow-sm: 0 8px 24px rgba(40, 60, 84, .07);
    --shadow-md: 0 18px 45px rgba(40, 60, 85, .13);
    --shadow-lg: 0 30px 80px rgba(25, 38, 52, .24);
    --hero-bg: radial-gradient(circle at 14% 42%, rgba(120, 170, 230, .28), transparent 25%), radial-gradient(circle at 86% 22%, rgba(120, 200, 160, .26), transparent 27%), linear-gradient(145deg, #f8fbff, #f3f9f6 55%, #f7fbfd);
    --nav-bg: rgba(255, 255, 255, .72);
    --scrim: rgba(20, 30, 40, .35);
    --card-peach: #e0f1f1;
    --card-mint: #e2f2e9;
    --card-blue: #e3edf9;
    --card-rose: #e6f0f7;
    --card-lilac: #eceaf7;
    --card-gold: #f6efdb;
    --card-ring: rgba(255, 255, 255, .6);
    --card-chip: rgba(255, 255, 255, .72);
    --scrollbar-track: #eef3f6;
    --scrollbar-thumb: #a9b4be;
    --scrollbar-thumb-hover: #8e99a4;
    --serif: "Fraunces", Georgia, "Times New Roman", serif;
    --sans: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

:root[data-theme="dark"] {
    --paper: #14171c;
    --surface: #1d2128;
    --surface-soft: #1a1e24;
    --surface-muted: #262b33;
    --ink: #e6ebf0;
    --muted: #9aa4af;
    --faint: #707a86;
    --line: rgba(255, 255, 255, .09);
    --line-strong: rgba(255, 255, 255, .16);
    --pink: #7fb0f0;
    --pink-dark: #9cc2f5;
    --pink-soft: #1f2a3a;
    --pink-softer: #1b2432;
    --green: #7cc9a0;
    --green-dark: #98d7b4;
    --green-soft: #1d2e26;
    --green-softer: #1a2721;
    --danger: #f07386;
    --danger-strong: #ff93a3;
    --danger-soft: #3b2027;
    --danger-ink: #24141a;
    --skeleton-sheen: rgba(255, 255, 255, .07);
    --footer-bg: #0e1115;
    --footer-ink: #e6ebf0;
    --shadow-sm: 0 8px 24px rgba(0, 0, 0, .3);
    --shadow-md: 0 18px 45px rgba(0, 0, 0, .42);
    --shadow-lg: 0 30px 80px rgba(0, 0, 0, .6);
    --hero-bg: radial-gradient(circle at 14% 42%, rgba(70, 120, 190, .22), transparent 28%), radial-gradient(circle at 86% 22%, rgba(60, 150, 110, .2), transparent 30%), linear-gradient(145deg, #14181e, #161c1f 55%, #13171b);
    --nav-bg: rgba(26, 30, 36, .74);
    --scrim: rgba(5, 8, 11, .6);
    --card-peach: #1d2e30;
    --card-mint: #1d2e26;
    --card-blue: #1f2a3a;
    --card-rose: #1f2a33;
    --card-lilac: #26263a;
    --card-gold: #35301f;
    --card-ring: rgba(255, 255, 255, .07);
    --card-chip: rgba(255, 255, 255, .07);
    --scrollbar-track: #14171c;
    --scrollbar-thumb: #5f6975;
    --scrollbar-thumb-hover: #7f8995;
}

/* Barra de rolagem do site inteiro: a viewport e as áreas de rolagem independentes do painel admin usam a mesma aparência. */
*::-webkit-scrollbar { width: 10px; height: 10px }
*::-webkit-scrollbar-track { background: var(--scrollbar-track) }

*::-webkit-scrollbar-thumb {
    min-height: 42px;
    border: 2px solid var(--scrollbar-track);
    border-radius: 999px;
    background: var(--scrollbar-thumb);
    background-clip: padding-box;
}

*::-webkit-scrollbar-thumb:hover { background-color: var(--scrollbar-thumb-hover) }
*::-webkit-scrollbar-corner { background: var(--scrollbar-track) }
*::-webkit-scrollbar-button { display: none; width: 0; height: 0 }

/* Fontes do site (hospedadas localmente, licença SIL OFL — ver assets/fonts/OFL-*.txt).
   Fraunces: títulos, números e destaques. Plus Jakarta Sans: texto e interface. */
@font-face {
    font-family: "Fraunces";
    font-style: normal;
    font-weight: 300 700;
    font-display: swap;
    src: url("fonts/fraunces.woff2") format("woff2");
}

@font-face {
    font-family: "Fraunces";
    font-style: italic;
    font-weight: 300 700;
    font-display: swap;
    src: url("fonts/fraunces-italic.woff2") format("woff2");
}

@font-face {
    font-family: "Plus Jakarta Sans";
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
    src: url("fonts/plus-jakarta-sans.woff2") format("woff2");
}

@font-face {
    font-family: "Plus Jakarta Sans";
    font-style: italic;
    font-weight: 400 800;
    font-display: swap;
    src: url("fonts/plus-jakarta-sans-italic.woff2") format("woff2");
}