/* ==========================================================================
   Richmo Media — Design Tokens
   Paleta "Creative Tech". Fundo travado em #0B0B0F; gradiente roxo→azul→rosa
   usado com moderação ("ponto de resolução"). Ver prd.md §6.
   ========================================================================== */

/* --- Fontes self-hosted ------------------------------------------------- */
/* Geist Sans entra quando os .woff2 forem adicionados em assets/fonts/;
   até lá o stack cai para Outfit (já self-hosted). */
@font-face {
  font-family: "Outfit";
  src: url("../assets/fonts/Outfit-Regular.woff2") format("woff2"),
       url("../assets/fonts/Outfit-Regular.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Outfit";
  src: url("../assets/fonts/Outfit-Bold.woff2") format("woff2"),
       url("../assets/fonts/Outfit-Bold.ttf") format("truetype");
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: "Geist Mono";
  src: url("../assets/fonts/GeistMono-Regular.woff2") format("woff2"),
       url("../assets/fonts/GeistMono-Regular.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
}

:root {
  /* --- Paleta base (travada) ------------------------------------------- */
  --bg:        #0B0B0F;
  --purple:    #7C3AED;
  --blue:      #2563EB;
  --pink:      #EC4899;
  --white:     #FFFFFF;

  /* --- Tinta (texto sobre fundo escuro) ------------------------------- */
  --ink-0: rgba(255, 255, 255, 0.95);  /* títulos / texto primário */
  --ink-1: rgba(255, 255, 255, 0.70);  /* corpo / secundário */
  --ink-2: rgba(255, 255, 255, 0.50);  /* labels / terciário */
  --ink-3: rgba(255, 255, 255, 0.32);  /* faint / metadados */

  /* --- Superfícies e linhas ------------------------------------------- */
  --surface-1: #111118;
  --surface-2: #15151F;
  --line:        rgba(255, 255, 255, 0.09);
  --line-strong: rgba(255, 255, 255, 0.16);

  /* --- Gradiente de marca (roxo → azul → rosa) ------------------------ */
  --grad-brand: linear-gradient(100deg, var(--purple) 0%, var(--blue) 52%, var(--pink) 100%);
  --grad-soft:  linear-gradient(100deg, rgba(124, 58, 237, 0.16), rgba(37, 99, 235, 0.10) 52%, rgba(236, 72, 153, 0.16));
  /* Halo do "alvo" — ponto de resolução */
  --glow-target: radial-gradient(closest-side, rgba(236, 72, 153, 0.55), rgba(124, 58, 237, 0.18) 70%, transparent);

  /* --- Tipografia ------------------------------------------------------ */
  --font-sans: "Geist Sans", "Outfit", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "Cascadia Code", "SFMono-Regular", Menlo, monospace;

  /* Escala fluida (clamp: mobile → desktop) */
  --text-xs:   0.78rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   clamp(1.10rem, 1.0rem + 0.5vw, 1.35rem);
  --text-xl:   clamp(1.45rem, 1.2rem + 1.2vw, 2.0rem);
  --text-2xl:  clamp(2.0rem, 1.5rem + 2.4vw, 3.25rem);
  --text-3xl:  clamp(2.8rem, 1.9rem + 4.2vw, 5.25rem);

  --leading-tight: 1.05;
  --leading-snug:  1.25;
  --leading-body:  1.6;
  --tracking-wide: 0.18em;   /* eyebrows / labels mono */

  /* --- Espaçamento ----------------------------------------------------- */
  --space-1: 0.5rem;
  --space-2: 0.75rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2.5rem;
  --space-6: 4rem;
  --space-7: 6rem;
  --space-8: clamp(2.75rem, 1.5rem + 4vw, 5rem);  /* respiro entre seções */

  --container: 72rem;        /* ~1152px */
  --gutter: clamp(1.25rem, 0.5rem + 4vw, 3rem);

  /* --- Raio / sombra / foco ------------------------------------------- */
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-pill: 999px;

  --shadow-soft: 0 1px 0 rgba(255,255,255,0.04) inset, 0 24px 60px -28px rgba(0,0,0,0.8);
  --focus-ring: 2px solid var(--pink);

  /* --- Motion ---------------------------------------------------------- */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-fast: 160ms;
  --dur: 280ms;
  --dur-slow: 600ms;
}