/* =============================================================
   BLUE POP — Design System v2 da dyg · Tokens
   Nascido do form Diagnóstico Dyg (2026-07). Herda do DS v1 o que
   é sagrado (paleta, Geist, banidos, voz) e troca a expressão:
   glow sutil vira sombra dura, contenção vira carimbo.
   Banidos seguem valendo: verde (qualquer tom), roxo/violet/indigo,
   azul antigo #1279D9. Vermelho só em erro/negativo.
   ============================================================= */

@font-face {
  font-family: 'Geist';
  src: url("../assets/fonts/Geist[wght].ttf") format("truetype-variations");
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: 'Geist Mono';
  src: url("../assets/fonts/GeistMono[wght].ttf") format("truetype-variations");
  font-weight: 100 900;
  font-display: swap;
}

:root {
  /* ---------------- COR · núcleo ---------------- */
  --pop-azul:       #1F7FFF;  /* electric blue — o herói */
  --pop-azul-hover: #4A9CFF;
  --pop-azul-press: #0A5BD9;
  --pop-noite:      #062B66;  /* sombra dura sobre azul */
  --pop-tinta:      #0A0A0A;  /* off-black institucional */
  --pop-tinta-2:    #141414;  /* superfície elevada no dark */
  --pop-paper:      #FAFAF7;  /* off-white de leitura */
  --pop-branco:     #FFFFFF;  /* cartão */
  --pop-prata:      #B4BAC4;  /* co-acento metálico */
  --pop-prata-forte:#6A7280;
  --pop-gelo:       #DCE9FF;  /* sombra dura sobre paper */
  --pop-azul-10:    rgba(31, 127, 255, 0.10);

  /* estados (contidos — o número fala) */
  --pop-negativo:   #FF5C64;
  --pop-aviso:      #FFB020;
  --pop-positivo:   var(--pop-azul); /* positivo é azul; verde é banido */

  /* ---------------- TIPO ---------------- */
  --pop-sans: 'Geist', -apple-system, 'Segoe UI', sans-serif;
  --pop-mono: 'Geist Mono', ui-monospace, 'SF Mono', monospace;

  /* escala (o pop fala mais alto que o v1: display solto) */
  --pop-t-xs:   12px;
  --pop-t-sm:   14px;
  --pop-t-base: 16px;
  --pop-t-md:   18px;
  --pop-t-lg:   22px;
  --pop-t-xl:   28px;
  --pop-t-2xl:  clamp(28px, 4vw, 40px);
  --pop-t-3xl:  clamp(34px, 5.4vw, 56px);
  --pop-t-disp: clamp(40px, 7.2vw, 84px);   /* display 900 */

  --pop-track-disp: -0.03em;
  --pop-track-tight: -0.02em;
  --pop-track-label: 0.14em;   /* labels mono caps */
  --pop-track-sticker: 0.16em;

  --pop-leading-disp: 1.02;
  --pop-leading-tight: 1.15;
  --pop-leading-body: 1.6;

  /* ---------------- SOMBRA DURA (assinatura nº 1) ----------------
     Sempre offset sólido, nunca blur. A cor da sombra depende da
     superfície: azul→noite · paper/branco→gelo · tinta→noite. */
  --pop-hard-1: 3px 3px 0;
  --pop-hard-2: 5px 5px 0;
  --pop-hard-3: 8px 8px 0;
  --pop-hard-4: 10px 10px 0;

  /* ---------------- BORDA & RAIO ---------------- */
  --pop-borda: 2px solid rgba(10, 10, 10, 0.85);     /* sobre claro */
  --pop-borda-no-azul: 2px solid var(--pop-tinta);
  --pop-borda-no-dark: 2px solid rgba(255, 255, 255, 0.16);
  --pop-r-chip: 8px;
  --pop-r-ui:   12px;   /* botão, input, card interno */
  --pop-r-card: 20px;
  --pop-r-pill: 999px;

  /* ---------------- TILT (máx 2 graus, sempre) ---------------- */
  --pop-tilt-1: -2deg;
  --pop-tilt-2: -1.4deg;
  --pop-tilt-3: 1.6deg;
  --pop-tilt-4: 2deg;

  /* ---------------- ESPAÇO (base 4px) ---------------- */
  --pop-s1: 4px;  --pop-s2: 8px;   --pop-s3: 12px; --pop-s4: 16px;
  --pop-s5: 24px; --pop-s6: 32px;  --pop-s7: 48px; --pop-s8: 64px;
  --pop-s9: 96px; --pop-s10: 128px;

  /* ---------------- MOTION ---------------- */
  --pop-e-carimbo: cubic-bezier(0.2, 1.4, 0.4, 1);  /* overshoot de carimbo */
  --pop-e-ui: ease;
  --pop-d-ui: 0.15s;      /* hover/press */
  --pop-d-entrada: 0.45s; /* telas/reveals */
  --pop-d-carimbo: 0.5s;
  --pop-d-flutua: 14s;    /* formas de fundo */
}

/* ---------------- SUPERFÍCIES ----------------
   Três fundos oficiais. Cada um define suas variáveis derivadas:
   texto, borda e cor da sombra dura. Usar via classe no contêiner. */

.sup-azul {
  background: var(--pop-azul);
  color: var(--pop-branco);
  --sup-texto: var(--pop-branco);
  --sup-texto-2: rgba(255, 255, 255, 0.86);
  --sup-mudo: rgba(255, 255, 255, 0.6);
  --sup-sombra: var(--pop-noite);
  --sup-borda: var(--pop-borda-no-azul);
  --sup-linha: rgba(255, 255, 255, 0.22);
}
.sup-paper {
  background: var(--pop-paper);
  color: var(--pop-tinta);
  --sup-texto: var(--pop-tinta);
  --sup-texto-2: rgba(10, 10, 10, 0.78);
  --sup-mudo: rgba(10, 10, 10, 0.48);
  --sup-sombra: var(--pop-gelo);
  --sup-borda: var(--pop-borda);
  --sup-linha: rgba(10, 10, 10, 0.14);
}
.sup-tinta {
  background: var(--pop-tinta);
  color: #F5F5F2;
  --sup-texto: #F5F5F2;
  --sup-texto-2: rgba(245, 245, 242, 0.8);
  --sup-mudo: rgba(245, 245, 242, 0.5);
  --sup-sombra: var(--pop-noite);
  --sup-borda: var(--pop-borda-no-dark);
  --sup-linha: rgba(255, 255, 255, 0.14);
}

/* grade pontilhada — só sobre paper */
.grade-pontilhada {
  background-image: radial-gradient(rgba(31, 127, 255, 0.14) 1px, transparent 1px);
  background-size: 26px 26px;
}