/* ===========================================================================
   Nextside Performance — design tokens
   Redesign 2026-07 (NEX-176): dark-first. `:root` = dark (default do site).
   `[data-theme="light"]` = variante warm-paper coerente. Toggle preservado.
   Tudo aqui é semântico; trocar a paleta reskina o site inteiro.
   =========================================================================== */
:root {
  /* identidade Nextside (cores absolutas — pontos de marca) */
  --ns-aperol: #DE2E03;     /* acento primário (Aperol) */
  --ns-red-flare: #FA4616;  /* vermelho mais quente — hover/gradiente */
  --ns-amber: #FDBF0F;
  --ns-amber-light: #FFD86B;
  --ns-vanilla: #FFFAEE;    /* texto premium (menos cansativo que branco puro) */

  /* gradiente de marca (hero highlight) */
  --grad-brand: linear-gradient(135deg, #E02C24 0%, #FDBF0F 100%);
  /* gradiente dos slabs de CTA (Aperol → vermelho profundo → dourado) */
  --grad-cta: linear-gradient(120deg, #DE2E03 0%, #A81F00 55%, #C6890A 135%);

  /* tipografia — Bricolage Grotesque (display) + Geist (corpo/UI) + JetBrains Mono */
  --font-display: "Bricolage Grotesque", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display-tight: "Bricolage Grotesque", system-ui, -apple-system, sans-serif;
  --font-body: "Geist", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-ui: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* espaçamento */
  --reading-width: 700px;
  --content-padding: 20px;
}

/* === DARK THEME (default — :root sem escolha manual, e toggle "dark") === */
:root,
:root[data-theme="dark"] {
  --bg: #131313;
  --bg-surface: #1C1B1B;   /* cards / superfície nível 1 */
  --bg-elevated: #201F1F;  /* overlays / nível 2 */
  --fg: #ECE7DC;           /* texto primário (vanilla suave) */
  --fg-muted: #A7A29A;     /* texto secundário */
  --fg-soft: #95908A;      /* meta / timestamps — ≥4.5:1 sobre charcoal (WCAG AA) */
  --border: #2A2926;
  --border-strong: #3C3A35;
  --border-hair: rgba(255, 250, 238, 0.07); /* outline de card (mock: 1px low-opacity) */
  --card-bg: rgba(32, 31, 31, 0.55);         /* glass-card */
  --accent: var(--ns-aperol);
  --accent-hover: var(--ns-red-flare);
  --accent-contrast: #FFFFFF;                /* texto sobre acento — branco p/ ≥4.5:1 (WCAG) */
  --accent-text: var(--ns-red-flare);        /* Aperol p/ texto PEQUENO em dark (≥4.5:1) */
  --link: #FF8A66;
  --link-hover: var(--ns-amber-light);
  --selection-bg: rgba(222, 46, 3, 0.32);
  --code-bg: #1A1918;
  --shadow: rgba(0, 0, 0, 0.6);
}

/* === LIGHT THEME (warm-paper — só via toggle explícito) === */
:root[data-theme="light"] {
  --bg: #FBF7EE;
  --bg-surface: #FFFFFF;
  --bg-elevated: #FFFDF8;
  --fg: #191919;
  --fg-muted: #5A554C;
  --border: #E7E1D3;
  --border-strong: #CFC7B4;
  --border-hair: rgba(25, 25, 25, 0.08);
  --card-bg: #FFFFFF;
  --accent: var(--ns-aperol);
  --accent-hover: var(--ns-red-flare);
  --accent-contrast: #FFFFFF;
  --accent-text: var(--ns-aperol);           /* em light, Aperol sobre creme já contrasta */
  --link: #B62405;
  --link-hover: var(--ns-red-flare);
  --selection-bg: rgba(222, 46, 3, 0.16);
  --code-bg: #F2EEDF;
  --shadow: rgba(40, 28, 12, 0.10);
  /* gradiente escurecido p/ o hero clipado ficar legível sobre creme (WCAG) */
  --grad-brand: linear-gradient(120deg, #C22208 0%, #A85D00 100%);
  --fg-soft: #726D62;                         /* meta/timestamps ≥4.5:1 sobre creme */
}

/* baseline */
html, body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection {
  background: var(--selection-bg);
  color: var(--fg);
}

@media (max-width: 720px) {
  html, body {
    font-size: 17px;
    line-height: 1.68;
  }
}