/* =============================================================================
   Apolo — tokens da identidade visual

   Apolo é a referência técnica do ecossistema: luz, precisão, blueprint.
   A paleta é slate profundo com acento solar (âmbar). Nenhum hex solto nos
   outros arquivos — qualquer cor sai daqui.

   O site tem tema claro e escuro. Todo token de cor é declarado duas vezes:
   em :root (escuro, o padrão) e em [data-tema="claro"]. Os tokens que não são
   cor ficam apenas em :root.
   ========================================================================== */

:root {
    /* ---- Superfícies (escuro é o padrão) -------------------------------- */

    /* Fundo da página. */
    --surface-base: #0B0F17;

    /* Sidebar, topbar, blocos de apoio. */
    --surface-raised: #10151F;

    /* Cards, callouts, células de tabela destacadas. */
    --surface-card: #141B27;

    /* Blocos de código e diagramas. */
    --surface-code: #0D121B;

    /* Hover de item de navegação. */
    --surface-hover: #1A2331;

    /* ---- Texto ---------------------------------------------------------- */

    --text-strong: #F2F5F9;
    --text-base: #C3CCD9;
    --text-muted: #8593A6;
    --text-faint: #5D6B7D;

    /* ---- Acento solar --------------------------------------------------- */

    /* Links, item ativo, destaques, ícones. */
    --accent: #F0A93B;
    --accent-strong: #FFC061;
    --accent-dim: #B87B1E;

    /* Fundos e bordas derivados do acento. */
    --accent-wash: rgba(240, 169, 59, .10);
    --accent-wash-strong: rgba(240, 169, 59, .18);
    --accent-border: rgba(240, 169, 59, .38);

    /* Texto SOBRE um fundo cheio de acento ou de perigo. Inverte com o tema: no
       escuro o acento é âmbar claro e pede texto escuro; no claro é marrom
       escuro e pede texto claro. Sem estes tokens, um botão preenchido só teria
       contraste em um dos dois temas. */
    --on-accent: #10151F;
    --on-danger: #16202B;

    /* ---- Acento secundário (azul blueprint) ----------------------------- */

    /* Usado em diagramas e tags para separar camadas sem competir com o âmbar. */
    --blueprint: #58A6FF;
    --blueprint-wash: rgba(88, 166, 255, .12);
    --blueprint-border: rgba(88, 166, 255, .35);

    /* ---- Bordas --------------------------------------------------------- */

    --border-subtle: #1E2733;
    --border-base: #2A3542;
    --border-strong: #3A4757;

    /* ---- Semânticos ----------------------------------------------------- */

    --ok: #3FB950;
    --ok-wash: rgba(63, 185, 80, .12);
    --warn: #E3B341;
    --warn-wash: rgba(227, 179, 65, .12);
    --danger: #F85149;
    --danger-wash: rgba(248, 81, 73, .12);

    /* ---- Sombras -------------------------------------------------------- */

    --shadow-card: 0 1px 2px rgba(0, 0, 0, .3);
    --shadow-float: 0 12px 32px rgba(0, 0, 0, .45);

    /* ---- Tipografia ----------------------------------------------------- */

    --font-display: 'Sora', 'Segoe UI', system-ui, sans-serif;
    --font-body: 'Inter', 'Segoe UI', system-ui, sans-serif;
    --font-mono: 'Cascadia Code', 'JetBrains Mono', Consolas, 'Courier New', monospace;

    --fs-h1: 40px;
    --lh-h1: 48px;
    --fs-h2: 27px;
    --lh-h2: 36px;
    --fs-h3: 20px;
    --lh-h3: 28px;
    --fs-h4: 16px;
    --lh-h4: 24px;
    --fs-body: 15.5px;
    --lh-body: 27px;
    --fs-small: 13.5px;
    --lh-small: 21px;
    --fs-code: 13.5px;
    --lh-code: 22px;

    /* ---- Espaçamento e forma -------------------------------------------- */

    --radius-sm: 5px;
    --radius: 8px;
    --radius-lg: 12px;
    --radius-pill: 999px;

    /* Largura da coluna de leitura. Prosa técnica passa a cansar acima disso. */
    --measure: 820px;

    --sidebar-width: 288px;
    --toc-width: 220px;
    --topbar-height: 60px;

    /* ---- Movimento ------------------------------------------------------ */

    --transition: 160ms ease;

    /* Malha do fundo — reforça a leitura de "planta técnica". */
    --grid-size: 32px;
    --grid-line: rgba(255, 255, 255, .018);
}

/* -----------------------------------------------------------------------------
   Tema claro. Só os tokens de cor mudam; escala e forma são compartilhadas.

   O âmbar do tema escuro não tem contraste suficiente sobre branco, então o
   acento escurece aqui em vez de ser reaproveitado.
   -------------------------------------------------------------------------- */

[data-tema="claro"] {
    --surface-base: #FBFAF7;
    --surface-raised: #F4F2ED;
    --surface-card: #FFFFFF;
    --surface-code: #F6F4EF;
    --surface-hover: #EDEAE2;

    --text-strong: #16202B;
    --text-base: #3B4756;
    --text-muted: #677687;
    --text-faint: #8B98A8;

    --accent: #A9660A;
    --accent-strong: #8A5308;
    --accent-dim: #C98A2E;

    --accent-wash: rgba(169, 102, 10, .07);
    --accent-wash-strong: rgba(169, 102, 10, .13);
    --accent-border: rgba(169, 102, 10, .32);

    /* Acento e perigo escurecem no tema claro: o texto sobre eles clareia. */
    --on-accent: #FFFFFF;
    --on-danger: #FFFFFF;

    --blueprint: #0B5FBF;
    --blueprint-wash: rgba(11, 95, 191, .08);
    --blueprint-border: rgba(11, 95, 191, .28);

    --border-subtle: #E6E2D9;
    --border-base: #D5D0C4;
    --border-strong: #BDB6A7;

    --ok: #1A7F37;
    --ok-wash: rgba(26, 127, 55, .09);
    --warn: #9A6700;
    --warn-wash: rgba(154, 103, 0, .10);
    --danger: #CF222E;
    --danger-wash: rgba(207, 34, 46, .09);

    --shadow-card: 0 1px 2px rgba(20, 25, 35, .06);
    --shadow-float: 0 12px 32px rgba(20, 25, 35, .14);

    --grid-line: rgba(20, 30, 45, .028);
}

@media (max-width: 991px) {
    :root {
        --fs-h1: 32px;
        --lh-h1: 40px;
        --fs-h2: 23px;
        --lh-h2: 31px;
        --fs-h3: 18px;
        --lh-h3: 26px;
    }
}