/* Karfy — variáveis geradas a partir de tokens.json */
/* Cópia de docs/marca/karfy-tokens.css. A fonte Inter é carregada por <link> no index.html (sem @import, para não atrasar a pintura). */

:root, [data-theme="claro"] {
  --superficie: #F6F7F5;
  --superficie-elevada: #FFFFFF;
  --linha: #DCE2DF;
  --tinta: #0F1A24;
  --tinta-suave: #56616B;
  --marca: #0E6B5C;
  --marca-forte: #0A5145;
  --marca-fundo: #E3F1ED;
  --texto-sobre-marca: #FFFFFF;
  --acento: #B9E33B;
  --noite: #0F1A24;
  --aviso: #A15700;
  --aviso-fundo: #FBEFD9;
  --perigo: #B42318;
  --perigo-fundo: #FBE6E4;
}

[data-theme="escuro"] {
  --superficie: #0B1520;
  --superficie-elevada: #12202D;
  --linha: #24333F;
  --tinta: #EEF3F1;
  --tinta-suave: #9CA9B4;
  --marca: #3CC4A5;
  --marca-forte: #6FD9BF;
  --marca-fundo: #12332E;
  --texto-sobre-marca: #062019;
  --acento: #C6EE55;
  --noite: #060C12;
  --aviso: #F0A23B;
  --aviso-fundo: #3A2A12;
  --perigo: #F2786C;
  --perigo-fundo: #3D1D1B;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="claro"]) {
    --superficie: #0B1520;
    --superficie-elevada: #12202D;
    --linha: #24333F;
    --tinta: #EEF3F1;
    --tinta-suave: #9CA9B4;
    --marca: #3CC4A5;
    --marca-forte: #6FD9BF;
    --marca-fundo: #12332E;
    --texto-sobre-marca: #062019;
    --acento: #C6EE55;
    --noite: #060C12;
    --aviso: #F0A23B;
    --aviso-fundo: #3A2A12;
    --perigo: #F2786C;
    --perigo-fundo: #3D1D1B;
  }
}

:root {
  --espaco-1: 4px;
  --espaco-2: 8px;
  --espaco-3: 12px;
  --espaco-4: 16px;
  --espaco-6: 24px;
  --espaco-8: 32px;
  --raio-sm: 6px;
  --raio-md: 10px;
  --raio-lg: 16px;
  --raio-simbolo: 23%;
  --font-display: "Inter Display", "Inter", system-ui, sans-serif;
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
}

.display { font-family: var(--font-display); font-size: 40px; line-height: 44px; font-weight: 800; letter-spacing: -0.02em; }
.titulo-1 { font-family: var(--font-display); font-size: 28px; line-height: 34px; font-weight: 800; letter-spacing: -0.01em; }
.titulo-2 { font-family: var(--font-sans); font-size: 20px; line-height: 28px; font-weight: 600; }
.valor { font-family: var(--font-sans); font-size: 24px; line-height: 30px; font-weight: 700; font-variant-numeric: tabular-nums; }
.corpo { font-family: var(--font-sans); font-size: 15px; line-height: 22px; font-weight: 400; }
.corpo-forte { font-family: var(--font-sans); font-size: 15px; line-height: 22px; font-weight: 600; }
.legenda { font-family: var(--font-sans); font-size: 13px; line-height: 18px; font-weight: 400; }