/* ============================================================
   CERNIS — design tokens
   cernis.app · "O sinal informa. A pessoa decide."
   Tema claro é o padrão; o escuro entra via
   prefers-color-scheme ou [data-theme="dark"].
   ============================================================ */

:root {
  /* ---------- paleta da marca ---------- */
  /* Tinta — petróleo profundo, a base escura da marca */
  --cernis-tinta-950: #0D171C;
  --cernis-tinta-900: #142229;
  --cernis-tinta-800: #1B2E36;
  --cernis-tinta-700: #26414C;
  --cernis-tinta-500: #51666E;

  /* Papel & Neve — superfícies claras, frias e serenas */
  --cernis-papel: #F7F9F9;
  --cernis-branco: #FFFFFF;
  --cernis-neblina: #E2EAEC;
  --cernis-neve: #EDF3F4;
  --cernis-neve-2: #9FB4BA;

  /* Sinal — o âmbar do ponto que se acende */
  --cernis-sinal-400: #F5B45C;
  --cernis-sinal-500: #F0A63F;
  --cernis-sinal-600: #DE8F21;
  --cernis-sinal-800: #8F5108;

  /* Bruma — petróleo médio para dados e apoio */
  --cernis-bruma-300: #7FB9C6;
  --cernis-bruma-400: #56A3B4;
  --cernis-bruma-600: #2E6E7E;
  --cernis-bruma-700: #235764;

  /* Semáforo editorial — sóbrio, nunca gritado */
  --cernis-positivo-claro: #2E7D53;
  --cernis-positivo-escuro: #6FBF8F;
  --cernis-negativo-claro: #B4442F;
  --cernis-negativo-escuro: #E07A6B;

  /* ---------- tipografia ---------- */
  --fonte-display: "Schibsted Grotesk", "Helvetica Neue", Arial, sans-serif;
  --fonte-texto: "Instrument Sans", "Helvetica Neue", Arial, sans-serif;
  --fonte-dados: "Spline Sans Mono", "SF Mono", Menlo, monospace;

  /* escala (base 15px → 1rem = 16px no navegador; usamos rem) */
  --texto-dados-s: 0.75rem;   /* 12  — carimbos, timestamps      */
  --texto-corpo-s: 0.8125rem; /* 13  — apoio, legendas           */
  --texto-corpo:   0.9375rem; /* 15  — corpo padrão da UI        */
  --texto-corpo-l: 1.0625rem; /* 17  — corpo editorial           */
  --texto-titulo-s: 1.25rem;  /* 20  — título de cartão          */
  --texto-titulo:   1.5625rem;/* 25  — título de seção           */
  --texto-titulo-l: 1.9375rem;/* 31  — título de página          */
  --texto-display:  2.4375rem;/* 39  — display                   */
  --texto-display-l: 3.4375rem;/* 55 — hero                      */

  --peso-regular: 400;
  --peso-medio: 500;
  --peso-semi: 600;
  --peso-forte: 700;

  --altura-corpo: 1.55;
  --altura-titulo: 1.15;
  --tracking-display: -0.015em;
  --tracking-caps: 0.08em; /* rótulos em caixa-alta */

  /* ---------- geometria ---------- */
  --raio-s: 6px;
  --raio-m: 10px;
  --raio-l: 16px;
  --esp-1: 4px;  --esp-2: 8px;  --esp-3: 12px; --esp-4: 16px;
  --esp-5: 24px; --esp-6: 32px; --esp-7: 48px; --esp-8: 64px;

  /* ---------- papéis semânticos (tema claro) ---------- */
  --bg: var(--cernis-papel);
  --superficie: var(--cernis-branco);
  --superficie-2: var(--cernis-neve);
  --borda: var(--cernis-neblina);
  --texto: #16242B;
  --texto-2: var(--cernis-tinta-500);
  --acento: var(--cernis-sinal-600);       /* gráfico: ponto, marcadores */
  --acento-texto: var(--cernis-sinal-800); /* texto/link âmbar acessível */
  --sobre-acento: #1A1206;                 /* texto sobre fundo âmbar    */
  --apoio: var(--cernis-bruma-600);
  --positivo: var(--cernis-positivo-claro);
  --negativo: var(--cernis-negativo-claro);
  --grafico-1: var(--cernis-bruma-600);
  --grafico-2: var(--cernis-sinal-600);
  --grafico-3: var(--cernis-tinta-500);
  --grafico-4: var(--cernis-bruma-300);
  --sombra-cartao: 0 1px 2px rgba(13, 23, 28, 0.06), 0 4px 16px rgba(13, 23, 28, 0.05);
}

/* ---------- tema escuro ---------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: var(--cernis-tinta-950);
    --superficie: var(--cernis-tinta-900);
    --superficie-2: var(--cernis-tinta-800);
    --borda: #24363F;
    --texto: var(--cernis-neve);
    --texto-2: var(--cernis-neve-2);
    --acento: var(--cernis-sinal-500);
    --acento-texto: var(--cernis-sinal-400);
    --sobre-acento: #1A1206;
    --apoio: var(--cernis-bruma-400);
    --positivo: var(--cernis-positivo-escuro);
    --negativo: var(--cernis-negativo-escuro);
    --grafico-1: var(--cernis-bruma-400);
    --grafico-2: var(--cernis-sinal-500);
    --grafico-3: var(--cernis-neve-2);
    --grafico-4: var(--cernis-bruma-700);
    --sombra-cartao: 0 1px 2px rgba(0, 0, 0, 0.35), 0 6px 20px rgba(0, 0, 0, 0.25);
  }
}
:root[data-theme="dark"] {
  --bg: var(--cernis-tinta-950);
  --superficie: var(--cernis-tinta-900);
  --superficie-2: var(--cernis-tinta-800);
  --borda: #24363F;
  --texto: var(--cernis-neve);
  --texto-2: var(--cernis-neve-2);
  --acento: var(--cernis-sinal-500);
  --acento-texto: var(--cernis-sinal-400);
  --sobre-acento: #1A1206;
  --apoio: var(--cernis-bruma-400);
  --positivo: var(--cernis-positivo-escuro);
  --negativo: var(--cernis-negativo-escuro);
  --grafico-1: var(--cernis-bruma-400);
  --grafico-2: var(--cernis-sinal-500);
  --grafico-3: var(--cernis-neve-2);
  --grafico-4: var(--cernis-bruma-700);
  --sombra-cartao: 0 1px 2px rgba(0, 0, 0, 0.35), 0 6px 20px rgba(0, 0, 0, 0.25);
}

/* ---------- @font-face (ajuste o caminho conforme o projeto) ---------- */
@font-face {
  font-family: "Schibsted Grotesk";
  src: url("../fontes/schibsted-grotesk/schibsted-grotesk-v7-latin_latin-ext-regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Schibsted Grotesk";
  src: url("../fontes/schibsted-grotesk/schibsted-grotesk-v7-latin_latin-ext-500.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Schibsted Grotesk";
  src: url("../fontes/schibsted-grotesk/schibsted-grotesk-v7-latin_latin-ext-600.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Schibsted Grotesk";
  src: url("../fontes/schibsted-grotesk/schibsted-grotesk-v7-latin_latin-ext-700.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Instrument Sans";
  src: url("../fontes/instrument-sans/instrument-sans-v4-latin_latin-ext-regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Instrument Sans";
  src: url("../fontes/instrument-sans/instrument-sans-v4-latin_latin-ext-500.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Instrument Sans";
  src: url("../fontes/instrument-sans/instrument-sans-v4-latin_latin-ext-600.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Instrument Sans";
  src: url("../fontes/instrument-sans/instrument-sans-v4-latin_latin-ext-700.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Spline Sans Mono";
  src: url("../fontes/spline-sans-mono/spline-sans-mono-v13-latin_latin-ext-regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Spline Sans Mono";
  src: url("../fontes/spline-sans-mono/spline-sans-mono-v13-latin_latin-ext-500.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}