/* ============================================================
   TOKENS — Márcio Filho // 2026
   Valores extraídos do Manual de Identidade Visual.
   Não invente cor nova. Se precisar de um tom, derive daqui.
   ============================================================ */

/* ---------- Fontes ---------- */

@font-face {
  font-family: "Upheaval";
  src: url("../assets/fonts/upheavtt.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "CutePixel";
  src: url("../assets/fonts/CutePixel.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Rajdhani";
  src: url("../assets/fonts/Rajdhani-Regular.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Rajdhani";
  src: url("../assets/fonts/Rajdhani-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-display: swap;
}

@font-face {
  font-family: "Rajdhani";
  src: url("../assets/fonts/Rajdhani-Bold.ttf") format("truetype");
  font-weight: 700;
  font-display: swap;
}

:root {
  /* ---------- Cores da marca ---------- */
  --navy: #19182b;
  --ciano: #00eaff;
  --magenta: #fa3e79;
  --branco: #f7f7f7;

  /* Derivados — só variações de opacidade/luminância das quatro acima */
  --navy-alto: #211f38;   /* superfície de card */
  --navy-baixo: #121122;  /* fundo mais fundo */
  --linha: rgba(247, 247, 247, 0.12);
  --texto-suave: rgba(247, 247, 247, 0.72);
  --texto-fraco: rgba(247, 247, 247, 0.45);
  --ciano-glow: rgba(0, 234, 255, 0.35);
  --magenta-glow: rgba(250, 62, 121, 0.35);

  /* ---------- Tipografia ---------- */
  --f-logo: "Upheaval", "Courier New", monospace;   /* logo, títulos gigantes */
  --f-titulo: "CutePixel", "Upheaval", monospace;   /* títulos de seção, botões */
  --f-texto: "Rajdhani", system-ui, sans-serif;     /* corpo, subtítulos, tags */

  --t-display: clamp(2.75rem, 11vw, 7rem);
  --t-h1: clamp(2rem, 7vw, 4rem);
  --t-h2: clamp(1.6rem, 4.5vw, 2.75rem);
  --t-h3: clamp(1.15rem, 2.4vw, 1.5rem);
  --t-corpo: clamp(1rem, 1.6vw, 1.125rem);
  --t-tag: clamp(0.75rem, 1.4vw, 0.875rem);

  /* ---------- Espaçamento ---------- */
  --e-1: 0.5rem;
  --e-2: 1rem;
  --e-3: 1.5rem;
  --e-4: 2.5rem;
  --e-5: 4rem;
  --e-6: 6rem;
  --secao-y: clamp(3.5rem, 8vw, 6rem);
  --nav-h: 69px;

  /* ---------- Forma ---------- */
  --raio: 14px;
  --raio-p: 8px;
  --borda: 2px;
  --largura-max: 1180px;

  /* ---------- Movimento ---------- */
  --transicao: 200ms cubic-bezier(0.2, 0.7, 0.3, 1);
}