@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("/fonts/plus-jakarta-sans-latin-wght-normal.woff2") format("woff2");
}

/* ============================================================
   M4QNA One — Design tokens (P4, aprovado em 2026-10-05)
   Fonte única de cor, raio, espaço e luz. A paleta incumbente
   (base #0b0d0c + verde de marca) NÃO muda; este arquivo só dá
   nome aos valores e acrescenta o sistema de luz.
   Regras:
   - Nomes só com letras e hífens (o guard de drift só enxerga esses).
   - Nenhum arquivo além deste deve declarar cor literal nova:
     use var(--token). Valor novo = token novo aqui.
   ============================================================ */
:root {
  /* Superfícies escuras (camadas: base < baixa < média < alta) */
  --bg-base: #0b0d0c;
  --surface-low: #131316;
  --surface-mid: #17171b;
  --surface-high: #1c1c21;
  --line-faint: #232328;
  --line-soft: #26262b;

  /* Texto */
  --text-strong: #f4fff6;
  --text-body: #effcf1;
  --text-soft: #cfe9d8;

  /* Marca (verde incumbente + verde-água como luz de borda fria) */
  --brand: #22c55e;
  --brand-mid: #16a34a;
  --brand-deep: #14532d;
  --brand-light: #86efac;
  --brand-aqua: #2dd4bf;
  --brand-ink: #06210f;

  /* Semânticos de dados (verde só para ação e valor positivo) */
  --positive: #22c55e;
  --negative: #f87171;
  --warning: #fbbf24;
  --info: #38bdf8;
  --violet: #8b5cf6;
  --neutral-bar: #8a8fa6;

  /* Raios */
  --radius-s: 12px;
  --radius-m: 16px;
  --radius-l: 22px;
  --radius-xl: 30px;
  --radius-pill: 999px;

  /* Espaço */
  --space-s: 8px;
  --space-m: 16px;
  --space-l: 24px;
  --space-xl: 40px;

  /* Movimento */
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --dur-fast: 160ms;
  --dur-base: 280ms;

  /* Tipografia */
  --font-body: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: var(--font-body);

  /* Escala tipográfica: 5 tamanhos fixos (piso 12px) + 2 fluidos para números e títulos grandes */
  --fs-xs: 12px;
  --fs-s: 14px;
  --fs-m: 16px;
  --fs-l: 20px;
  --fs-xl: 28px;
  --fs-fluid: clamp(20px, 1.8vw, 28px);
  --fs-hero: clamp(28px, 3vw, 40px);

  /* Sistema de luz (6 camadas): base escura > poça de luz > vidro > aro > sombra tingida > respiração */
  --glow-brand: radial-gradient(60% 60% at 50% 50%, rgba(34, 197, 94, .34), transparent 70%);
  --glass: linear-gradient(105deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .02));
  --rim-light: inset 0 1px 0 rgba(255, 255, 255, .14);
  --rim-glow: inset -2px -2px 10px rgba(255, 255, 255, .06);
  --shadow-tint: 0 10px 28px rgba(5, 46, 22, .38);
  --shadow-deep: 0 18px 44px rgba(0, 0, 0, .42);
  --shadow-lift: 0 -16px 32px -6px var(--bg-base);
  --edge-light: linear-gradient(84deg, #2dd4bf -26%, #16a34a 23%, #22c55e 59%, #2dd4bf 138%);
  --edge-fade: linear-gradient(160deg, rgba(255, 255, 255, .25), rgba(255, 255, 255, .03) 60%, rgba(255, 255, 255, .01));
  --brand-gradient: linear-gradient(160deg, #16a34a 0%, #15803d 55%, #14532d 100%);
  --scrim-bottom: linear-gradient(0deg, #0b0d0c -10%, transparent 45%);
  --tile-surface: linear-gradient(160deg, rgba(255, 255, 255, .96), rgba(226, 236, 230, .9));
  --shadow-soft: 0 8px 22px rgba(5, 46, 22, .2);
  --fade-edge: linear-gradient(90deg, transparent, black 7%, black 93%, transparent);
}