/* =====================================================================
   base.css — reset, fontes, tokens-base, tipografia global
   (As variáveis da marca chegam via <style id="brand-tokens"> no header,
    geradas a partir de data/brand.php. Aqui ficam defaults e derivados.)
===================================================================== */

/* ---- Fonte da marca: PP Neue Montreal (variável, self-hosted) ---- */
@font-face {
    font-family: 'PP Neue Montreal';
    font-style: normal;
    font-weight: 200 800;            /* eixo real da fonte (default master = 200/Thin) */
    font-display: swap;
    /* WOFF2 variável primeiro: mobile (iOS Safari/webviews) aplica o eixo de peso
       de forma confiável. Sem isto, o .ttf cai no default master (200) e tudo
       fica extra-light no celular. Ordem: hint moderno → hint legado → ttf. */
    src: url('../fonts/PPNeueMontreal-Variable.woff2') format('woff2') tech(variations),
         url('../fonts/PPNeueMontreal-Variable.woff2') format('woff2-variations'),
         url('../fonts/PPNeueMontreal-Variable.ttf') format('truetype-variations');
}
/* ---- Fonte mono: JetBrains Mono (overlines / etiquetas) ---- */
@font-face {
    font-family: 'JetBrains Mono';
    font-style: normal;
    font-weight: 400 500;
    font-display: swap;
    src: url('../fonts/JetBrainsMono-latin.woff2') format('woff2');
}
/* Caso troque a marca e a fonte NÃO exista em /assets/fonts, comente os
   @font-face acima — o fallback (definido em --font-main no brand.php)
   assume automaticamente. */

/* ---- Reset enxuto ---- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
img, svg, video { display: block; max-width: 100%; }
button, input, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }

/* ---- Derivados de tokens ---- */
:root {
    --radius-sm: 10px;
    --radius:    16px;
    --radius-lg: 22px;
    --radius-pill: 999px;

    --sidebar-w: 248px;
    --main-pad-x: clamp(20px, 4vw, 64px);
    --main-pad-y: clamp(20px, 3vw, 40px);

    --content-max: 1180px;

    --shadow-sm: 0 1px 2px rgba(26, 25, 227, .04);
    --shadow:    0 12px 30px -12px rgba(26, 25, 227, .18);
    --shadow-lg: 0 30px 60px -24px rgba(26, 25, 227, .28);

    --ease: cubic-bezier(.22, .61, .36, 1);
    --ease-out: cubic-bezier(.16, 1, .3, 1);
}

/* ---- Tipografia global ---- */
html, body {
    font-family: var(--font-main, 'Instrument Sans', sans-serif);
    color: var(--text);
    background: var(--white);
    font-size: 16px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}
body { min-height: 100vh; }

h1, h2, h3, h4 { color: var(--text-strong); line-height: 1.08; font-weight: 600; letter-spacing: -.01em; }
strong, b { font-weight: 600; color: inherit; }

::selection { background: var(--primary); color: #fff; }

/* Foco acessível */
:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 4px; }

/* Scrollbar discreta */
* { scrollbar-width: thin; scrollbar-color: var(--border) transparent; }
*::-webkit-scrollbar { width: 9px; height: 9px; }
*::-webkit-scrollbar-thumb { background: var(--border); border-radius: 999px; }