/* ==========================================================================
   WT Visual & Motion — TOKENS (fonte técnica do DESIGN_SYSTEM.md)
   Único lugar onde cores hex e valores "soltos" são permitidos.
   ========================================================================== */

@font-face {
  font-family: "Manrope";
  src: url("../fonts/manrope-var.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("../fonts/jetbrains-mono-var.woff2") format("woff2");
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Cor — Noite */
  --c-noite-950: #050505;
  --c-noite-900: #0b0b0c;
  --c-noite-800: #131314;
  --c-noite-700: #1c1c1e;
  /* Cor — Osso (branco quente do logo) */
  --c-osso-50: #faf4eb;
  --c-osso-200: #d9d3c8;
  --c-osso-400: #a8a298;
  --c-osso-600: #8a867d;
  /* Acento — Laranja Marco */
  --c-marco-500: #ff5b1f;
  --c-marco-600: #e04a12;
  --c-marco-700: #b83b0b;
  /* Semânticas */
  --c-ok: #7bd88f;
  --c-warn: #f5b84b;
  --c-erro: #ff6b6b;

  /* Linhas */
  --line: rgb(250 244 235 / 0.12);
  --line-strong: rgb(250 244 235 / 0.24);
  --line-on-light: rgb(5 5 5 / 0.14);
  --veil: rgb(5 5 5 / 0.72);

  /* Papéis (tema padrão = Noite) */
  --bg: var(--c-noite-950);
  --surface-1: var(--c-noite-900);
  --surface-2: var(--c-noite-800);
  --surface-3: var(--c-noite-700);
  --fg: var(--c-osso-50);
  --fg-2: var(--c-osso-200);
  --fg-3: var(--c-osso-400);
  --fg-4: var(--c-osso-600);
  --accent: var(--c-marco-500);
  --accent-press: var(--c-marco-600);
  --rule: var(--line);

  /* Tipografia */
  --font-sans: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;
  --fs-display: clamp(2.5rem, 1rem + 5.2vw, 4.25rem);
  --fs-h1: clamp(2.5rem, 1.5rem + 4vw, 4.25rem);
  --fs-h2: clamp(1.875rem, 1.3rem + 2.4vw, 2.75rem);
  --fs-h3: clamp(1.25rem, 1.1rem + 0.7vw, 1.5rem);
  --fs-lead: clamp(1.125rem, 1.02rem + 0.5vw, 1.375rem);
  --fs-body: 1rem;
  --fs-small: 0.875rem;
  --fs-label: 0.75rem;
  --track-label: 0.28em;
  --track-tight: -0.035em;

  /* Espaço (base 4px) */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 5rem;
  --s-9: 8rem;

  /* Layout */
  --container: 1240px;
  --gutter: 1.5rem;
  --measure: 62ch;
  --header-h: 76px;

  /* Forma */
  --r-0: 0;
  --r-1: 2px;
  --cut: 14px;
  --frame-arm: 14px;
  --frame-weight: 1.5px;

  /* Movimento */
  --ease: cubic-bezier(0.2, 0.7, 0.1, 1);
  --t-fast: 140ms;
  --t-base: 260ms;
  --t-slow: 520ms;
  --t-reveal: 800ms;

  /* Camadas */
  --z-header: 50;
  --z-modal: 100;
  --z-toast: 120;
}

/* Seção clara (Osso) */
.theme-osso {
  --bg: var(--c-osso-50);
  --surface-1: #f1eadf;
  --surface-2: #e9e1d4;
  --surface-3: #ddd4c5;
  --fg: var(--c-noite-950);
  --fg-2: #2a2927;
  --fg-3: #55524c;
  --fg-4: #68645c;
  --rule: var(--line-on-light);
  --accent: var(--c-marco-700);
  background: var(--bg);
  color: var(--fg);
  color-scheme: light;
}

@media (max-width: 640px) {
  :root {
    --gutter: 1rem;
    --header-h: 64px;
  }
}