/* ============================================================
   01 — VARIÁVEIS DE DESIGN (cores, fontes, espaçamentos)
   Edite aqui a identidade visual do site.
   ============================================================ */

:root {
  /* ---- Cores de fundo (obsidiana) ---- */
  --bg-0: #05060a;          /* fundo mais profundo */
  --bg-1: #080a10;          /* obsidiana principal  */
  --bg-2: #0c0f17;          /* superfície elevada   */
  --bg-3: #12161f;          /* cartões / elevação   */
  --bg-4: #171c28;          /* hover de cartões     */

  /* ---- Azul (identidade visual) ---- */
  --blue: #3d7dff;          /* azul principal       */
  --blue-bright: #7ab1ff;   /* azul claro / brilho  */
  --blue-deep: #1d4ed8;     /* azul profundo        */
  --blue-glow: rgba(61, 125, 255, 0.32);
  --blue-glow-soft: rgba(61, 125, 255, 0.14);

  /* ---- Texto ---- */
  --text: #eef1f6;
  --text-soft: #b9c1cf;
  --text-muted: #8b93a3;

  /* ---- Bordas e linhas ---- */
  --line: rgba(148, 163, 184, 0.14);
  --line-strong: rgba(148, 163, 184, 0.26);
  --line-blue: rgba(61, 125, 255, 0.45);

  /* ---- Gradiente da marca ---- */
  --gradient: linear-gradient(120deg, #7ab1ff 0%, #3d7dff 55%, #2f6bff 100%);
  --gradient-text: linear-gradient(120deg, #9cc2ff 0%, #3d7dff 100%);

  /* ---- Fontes ---- */
  --font-display: "Space Grotesk", "Segoe UI", system-ui, sans-serif;
  --font-body: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;

  /* ---- Layout ---- */
  --container: 1180px;
  --radius-sm: 10px;
  --radius: 16px;
  --radius-lg: 24px;
  --header-h: 76px;

  /* ---- Sombras ---- */
  --shadow-card: 0 18px 50px rgba(0, 0, 0, 0.45);
  --shadow-glow: 0 0 60px var(--blue-glow-soft);
  --shadow-glow-strong: 0 0 80px var(--blue-glow);

  /* ---- Transições ---- */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur: 0.4s;
  --dur-slow: 0.7s;
}