/* ============================================================================
   DUET · Design Tokens
   Tema: galáxia (infinidade) + vidro (réplica). Dark, premium, reflexivo.
   Estas variáveis são a única fonte de verdade. Componentes consomem daqui.
   ============================================================================ */

@import url("https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,300;9..40,400;9..40,500;9..40,600;9..40,700&family=EB+Garamond:ital,wght@0,400;0,500;0,600;1,400&display=swap");

:root {
  /* ----------------------------------------------------------------------
     1. COR · Espaço profundo (pretos com toque azul/violeta, sem estrelas)
     ---------------------------------------------------------------------- */
  --duet-void: #05060a;          /* fundo mais profundo               */
  --duet-space-900: #080a12;     /* base de superfícies escuras       */
  --duet-space-800: #0d1020;     /* elevação 1                        */
  --duet-space-700: #141830;     /* elevação 2                        */
  --duet-space-600: #1c2140;     /* elevação 3 / bordas fortes        */

  /* Tintas de nebulosa — usadas em gradientes e brilhos, nunca chapadas */
  --duet-aurora-teal: #35e6c5;
  --duet-aurora-cyan: #3aa8ff;
  --duet-aurora-violet: #8b5cf6;
  --duet-aurora-magenta: #e15fd0;
  --duet-aurora-indigo: #4436b8;

  /* Acento primário — o "brilho duet" */
  --duet-glow: #7cf3e0;
  --duet-glow-soft: rgba(124, 243, 224, 0.16);
  --duet-accent: #8b5cf6;

  /* ----------------------------------------------------------------------
     2. TEXTO
     ---------------------------------------------------------------------- */
  --duet-text: #eef1fb;              /* texto principal                */
  --duet-text-muted: #c2c8de;        /* secundário (AAA)               */
  --duet-text-faint: #adb4ce;        /* terciário / hints (AAA)        */
  --duet-text-on-glow: #05060a;      /* texto sobre superfície clara   */

  /* ----------------------------------------------------------------------
     3. VIDRO · superfícies translúcidas (réplica)
     ---------------------------------------------------------------------- */
  --duet-glass-fill: rgba(255, 255, 255, 0.045);
  --duet-glass-fill-strong: rgba(255, 255, 255, 0.08);
  --duet-glass-stroke: rgba(255, 255, 255, 0.12);
  --duet-glass-stroke-strong: rgba(255, 255, 255, 0.22);
  --duet-glass-highlight: rgba(255, 255, 255, 0.5); /* topo do bisel   */
  --duet-glass-blur: 18px;
  --duet-glass-blur-strong: 30px;

  /* ----------------------------------------------------------------------
     4. GRADIENTES · aurora boreal + poeira estelar
     ---------------------------------------------------------------------- */
  --duet-gradient-aurora: linear-gradient(
    115deg,
    var(--duet-aurora-indigo) 0%,
    var(--duet-aurora-violet) 28%,
    var(--duet-aurora-cyan) 58%,
    var(--duet-aurora-teal) 100%
  );
  --duet-gradient-glow: linear-gradient(135deg, var(--duet-glow), var(--duet-aurora-cyan));
  --duet-gradient-ink: linear-gradient(180deg, var(--duet-space-800), var(--duet-void));

  /* Superfície de espelho — usado em botões refletivos */
  --duet-mirror: linear-gradient(
    145deg,
    rgba(255, 255, 255, 0.22) 0%,
    rgba(255, 255, 255, 0.06) 18%,
    rgba(255, 255, 255, 0.02) 50%,
    rgba(255, 255, 255, 0.06) 82%,
    rgba(255, 255, 255, 0.16) 100%
  );

  /* ----------------------------------------------------------------------
     5. TIPOGRAFIA
     ---------------------------------------------------------------------- */
  --duet-font-heading: "EB Garamond", "Garamond", "Times New Roman", serif;
  --duet-font-body: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  --duet-fs-display: clamp(2.6rem, 6vw, 4.4rem);
  --duet-fs-h1: clamp(2rem, 4vw, 3rem);
  --duet-fs-h2: clamp(1.5rem, 3vw, 2.1rem);
  --duet-fs-h3: 1.35rem;
  --duet-fs-body: 1rem;
  --duet-fs-sm: 0.875rem;
  --duet-fs-xs: 0.75rem;

  --duet-lh-tight: 1.1;
  --duet-lh-body: 1.6;
  --duet-tracking-wide: 0.18em;

  /* ----------------------------------------------------------------------
     6. ESPAÇO / RAIO
     ---------------------------------------------------------------------- */
  --duet-space-1: 4px;
  --duet-space-2: 8px;
  --duet-space-3: 12px;
  --duet-space-4: 16px;
  --duet-space-5: 24px;
  --duet-space-6: 32px;
  --duet-space-7: 48px;
  --duet-space-8: 64px;

  --duet-radius-sm: 10px;
  --duet-radius-md: 16px;
  --duet-radius-lg: 24px;
  --duet-radius-xl: 32px;
  --duet-radius-pill: 999px;

  /* ----------------------------------------------------------------------
     7. SOMBRA / BRILHO
     ---------------------------------------------------------------------- */
  --duet-shadow-ambient: 0 24px 60px -20px rgba(0, 0, 0, 0.7);
  --duet-shadow-glass: 0 8px 32px rgba(0, 0, 0, 0.45),
    inset 0 1px 0 var(--duet-glass-highlight);
  --duet-glow-ring: 0 0 0 1px var(--duet-glass-stroke),
    0 0 24px -4px var(--duet-glow-soft);
  --duet-glow-strong: 0 0 40px -6px rgba(124, 243, 224, 0.5);

  /* ----------------------------------------------------------------------
     8. MOVIMENTO
     ---------------------------------------------------------------------- */
  --duet-ease: cubic-bezier(0.22, 1, 0.36, 1);      /* saída suave      */
  --duet-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --duet-dur-fast: 140ms;
  --duet-dur: 260ms;
  --duet-dur-slow: 480ms;

  --duet-orbit-duration: 2.4s;   /* período de órbita do spinner        */
  --duet-aurora-duration: 24s;   /* deriva do fundo aurora              */
}

/* Respeita quem prefere menos movimento */
@media (prefers-reduced-motion: reduce) {
  :root {
    --duet-aurora-duration: 0s;
    --duet-orbit-duration: 0s;
  }
}