/* ==========================================================
   HUB PANTA RHEI · TOKENS
   A única fonte de verdade de cor, tipo, espaço e forma.
   Regra da casa: trocar o tema muda SÓ as cores.
   Nenhum componente usa valor solto; tudo aponta para cá.
   ========================================================== */

@font-face {
  font-family: "Inter";
  src: url("../fontes/inter.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ---------- Forma: igual nos dois temas ---------- */
:root {
  /* Tipografia: uma família só (Inter oficial, com cv11/ss01) */
  --font: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --fs-11: 11px;   /* rótulos em caixa-alta */
  --fs-12: 12px;   /* metadados, etiquetas (mínimo operacional) */
  --fs-13: 13px;   /* texto secundário, botões pequenos */
  --fs-14: 14.5px; /* corpo */
  --fs-16: 16px;   /* títulos de cartão */
  --fs-18: 18px;   /* títulos de painel */
  --fs-24: 24px;   /* títulos de página no celular */
  --fs-32: 32px;   /* títulos de página */
  --fs-40: 40px;   /* números de destaque */
  --fs-48: 48px;   /* saudação */
  --peso-texto: 400;
  --peso-rotulo: 500;
  --peso-titulo: 600;
  --tr-titulo: -0.035em;   /* títulos apertados = ar premium */
  --tr-numero: -0.04em;
  --tr-caixa-alta: 0.08em;

  /* Espaço: base 4px */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 20px;
  --s6: 24px; --s7: 32px; --s8: 40px; --s9: 64px;

  /* Raios por função: shell > container > card > controle > etiqueta */
  --r-container: 18px;
  --r-card: 12px;
  --r-controle: 10px;
  --r-pequeno: 6px;
  --r-etiqueta: 999px;

  /* Medidas de controle */
  --h-controle: 40px;
  --h-controle-sm: 32px;
  --h-controle-lg: 48px;
  --alvo-toque: 44px;

  /* Movimento */
  --ease: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-mover: cubic-bezier(0.77, 0, 0.175, 1);
  --t-rapido: 140ms;
  --t-medio: 220ms;
  --t-lento: 320ms;

  /* Marca */
  --laranja: #DD6212;
}

/* ---------- Diurno: papel e tinta ---------- */
:root,
[data-tema="claro"] {
  color-scheme: light;

  --bg: #F4EFE6;          /* papel */
  --surface: #FBF8F2;     /* folha por cima do papel */
  --surface-2: #F1EBE0;   /* folha dobrada, blocos internos */
  --inset: #EDE6D9;       /* campos e trilhos: "afundados" */
  --hover: rgba(40, 30, 18, 0.05);
  --ativo: rgba(40, 30, 18, 0.08);

  --ink: #1D1914;         /* tinta: texto principal */
  --ink-2: #4A4239;       /* texto de apoio */
  --ink-3: #6F665B;       /* metadados (4,9:1 no papel) */
  --ink-4: #9C9284;       /* desabilitado, marcadores */

  --line: rgba(40, 30, 18, 0.14);
  --line-soft: rgba(40, 30, 18, 0.09);
  --shadow-card: 0 0 0 1px rgba(40, 30, 18, 0.07), 0 1px 2px -1px rgba(40, 30, 18, 0.06), 0 2px 6px -2px rgba(40, 30, 18, 0.05);
  --shadow-float: 0 0 0 1px rgba(40, 30, 18, 0.08), 0 16px 36px -14px rgba(40, 30, 18, 0.28);
  --veu: rgba(29, 25, 20, 0.36);

  --accent: var(--laranja);
  --accent-ink: #B34A08;          /* laranja para texto: 4,8:1 no papel */
  --accent-wash: rgba(221, 98, 18, 0.1);
  --accent-solid: #1D1914;        /* botão em tinta; o laranja pontua */
  --accent-solid-hover: #3A332B;
  --on-accent: #FBF8F2;
  --focus: var(--laranja);
  --luz: transparent;             /* a luz de estúdio só acende à noite */

  /* Semânticas: separadas do laranja (atenção é âmbar, erro é vermelho) */
  --ok: #2F7A4F;      --ok-ink: #24613E;      --ok-wash: #E4EEE3;
  --warn: #B5770D;    --warn-ink: #7E5206;    --warn-wash: #F6EACF;
  --err: #C23A2E;     --err-ink: #9E2B21;     --err-wash: #F6E0DB;
  --info: #2F6690;    --info-ink: #24527A;    --info-wash: #E1EAF1;
  --violeta: #6A4C93; --violeta-ink: #56397D; --violeta-wash: #ECE5F2;
}

/* ---------- Noturno: grafite e laranja aceso ---------- */
[data-tema="escuro"] {
  color-scheme: dark;

  --bg: #121110;
  --surface: #1B1A18;
  --surface-2: #242220;
  --inset: #0D0C0B;
  --hover: rgba(243, 238, 231, 0.05);
  --ativo: rgba(243, 238, 231, 0.09);

  --ink: #F3EEE7;
  --ink-2: #C9C2B8;
  --ink-3: #978F85;
  --ink-4: #6B645C;

  --line: rgba(243, 238, 231, 0.12);
  --line-soft: rgba(243, 238, 231, 0.07);
  --shadow-card: 0 0 0 1px rgba(243, 238, 231, 0.07);
  --shadow-float: 0 0 0 1px rgba(243, 238, 231, 0.1), 0 20px 48px -12px rgba(0, 0, 0, 0.7);
  --veu: rgba(0, 0, 0, 0.55);

  --accent-ink: #F28D45;
  --accent-wash: rgba(242, 141, 69, 0.13);
  --accent-solid: #DD6212;        /* o laranja exato, com texto escuro: 4,96:1 */
  --accent-solid-hover: #EA7328;
  --on-accent: #1A1310;
  --luz: rgba(242, 141, 69, 0.13);

  --ok: #5DBB86;      --ok-ink: #7FD0A2;      --ok-wash: rgba(93, 187, 134, 0.13);
  --warn: #E2A83A;    --warn-ink: #F0C069;    --warn-wash: rgba(226, 168, 58, 0.13);
  --err: #F06B5E;     --err-ink: #F58C80;     --err-wash: rgba(240, 107, 94, 0.13);
  --info: #6FA6D6;    --info-ink: #93BDE3;    --info-wash: rgba(111, 166, 214, 0.14);
  --violeta: #A68BD1; --violeta-ink: #BDA7E0; --violeta-wash: rgba(166, 139, 209, 0.14);
}