/* ==========================================================================
   Design system "Deia Cosmos" — camada 1 (primitivos) e 2 (semânticos)
   Família visual: Super-Herói da IA · Deia Palco · Spacar Builder.
   Todas as combinações de texto foram medidas (WCAG AA); ver DESIGN-SYSTEM.md.
   ========================================================================== */

:root {
  /* ---- Primitivos: espaço profundo ---- */
  --cosmos-0: #05060f;   /* vazio */
  --cosmos-1: #0b0e24;   /* superfície */
  --cosmos-2: #14172e;   /* cartão (vidro sobre o vazio) */
  --cosmos-3: #1d2142;   /* elevado */
  --star: #f5f3ff;       /* texto principal   · 16,1:1 no cartão */
  --haze: #a9a6c9;       /* texto secundário  ·  7,5:1 */
  --dust: #8a87b0;       /* texto terciário   ·  5,2:1 (mínimo para texto) */

  /* ---- Primitivos: energia ---- */
  --gold: #ffcb47;       /* 11,7:1 */
  --flare: #ff8a3d;      /*  7,5:1 */
  --nova: #ec4899;       /*  5,0:1 — só texto ≥ 18px ou decoração */
  --nova-soft: #f472b6;  /*  6,7:1 */
  --ion: #5ac8ff;        /*  9,4:1 */
  --pulsar: #8b5cf6;     /*  4,2:1 — nunca como texto; brilho e fundo */
  --pulsar-soft: #a78bfa;/*  6,5:1 */
  --plasma: #ff4d6d;     /*  5,5:1 */
  --aurora: #34d399;     /*  9,2:1 */

  /* ---- Gradientes de marca ---- */
  --grad-hero: linear-gradient(135deg, #ffcb47 0%, #ff8a3d 45%, #ec4899 100%);
  --grad-cool: linear-gradient(135deg, #5ac8ff 0%, #8b5cf6 100%);
  --grad-orb: radial-gradient(circle at 34% 30%, #ffe08a 0%, #ffcb47 22%, #ff8a3d 55%, #ec4899 100%);
  --grad-glass: linear-gradient(180deg, rgba(255, 255, 255, 0.055) 0%, rgba(255, 255, 255, 0.015) 100%);

  /* ---- Céu: nebulosas + campo de estrelas (fixo, sem custo de scroll) ---- */
  --sky-nebula:
    radial-gradient(ellipse 60% 55% at 88% 6%, rgba(236, 72, 153, 0.20), transparent 70%),
    radial-gradient(ellipse 55% 60% at 8% 96%, rgba(139, 92, 246, 0.26), transparent 70%),
    radial-gradient(ellipse 45% 40% at 55% 60%, rgba(90, 200, 255, 0.07), transparent 70%);
  --sky-stars: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cg fill='%23f5f3ff'%3E%3Ccircle cx='12' cy='30' r='.7' opacity='.55'/%3E%3Ccircle cx='70' cy='190' r='.6' opacity='.35'/%3E%3Ccircle cx='133' cy='64' r='.9' opacity='.6'/%3E%3Ccircle cx='201' cy='140' r='.6' opacity='.4'/%3E%3Ccircle cx='168' cy='222' r='.8' opacity='.5'/%3E%3Ccircle cx='40' cy='112' r='.5' opacity='.3'/%3E%3Ccircle cx='228' cy='22' r='.7' opacity='.45'/%3E%3Ccircle cx='96' cy='12' r='.5' opacity='.3'/%3E%3C/g%3E%3C/svg%3E");

  /* ---- Tipografia ---- */
  --font-display: "Space Grotesk", "Inter", system-ui, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --track-kicker: 0.24em;

  /* ---- Forma, profundidade e movimento ---- */
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-pill: 999px;
  --blur-glass: 14px;
  --glow-gold: 0 0 0 1px rgba(255, 203, 71, 0.38), 0 18px 48px -22px rgba(236, 72, 153, 0.45);
  --glow-ion: 0 0 0 1px rgba(90, 200, 255, 0.38), 0 18px 48px -22px rgba(139, 92, 246, 0.5);
  --ease-arrive: cubic-bezier(0.16, 1, 0.3, 1);   /* desacelera ao chegar */
  --ease-leave: cubic-bezier(0.7, 0, 0.84, 0);    /* acelera ao sair */
  --dur-fast: 140ms;
  --dur-base: 220ms;
  --dur-slow: 420ms;

  /* ---- Semânticos de estado (cor + ícone + texto, nunca só cor) ---- */
  --state-available: var(--haze);     /* disponível no catálogo */
  --state-installed: var(--aurora);   /* instalado e verificado */
  --state-update: var(--ion);         /* atualização disponível */
  --state-confirm: var(--gold);       /* exige confirmação humana */
  --state-unknown: var(--dust);       /* não verificado — nunca "não instalado" */
  --state-running: var(--pulsar-soft);/* em andamento */
  --state-error: var(--plasma);       /* falhou */
}