/* ============================================================
   NEXFORMS — Design System · Tokens canônicos
   ------------------------------------------------------------
   Fonte única de verdade para cor, espaçamento, tipografia,
   raio, elevação e motion em TODO o site (nexform + mini-apps).

   Arquitetura em 3 camadas (skill: design-token):
     1. Global   — valores crus  (--nx-blue-500)
     2. Alias    — semânticos     (--bg, --text, --cyan)
     3. Componente— escopados     (definidos no CSS de cada tela)

   Regra: componentes referenciam ALIAS, nunca valores crus.
   Os nomes de alias históricos (--bg, --cyan, --green...) são
   mantidos para compatibilidade com o CSS já existente.
   Última atualização: 2026-07-17
============================================================ */

:root {
  /* ── 1. GLOBAL — paleta crua ──────────────────────────── */
  --nx-ink-950:   #050810;  /* fundo base            */
  --nx-ink-900:   #0b0f1a;  /* superfície            */
  --nx-ink-800:   #111827;  /* superfície elevada    */
  --nx-slate-600: #4a5568;  /* muted                 */
  --nx-slate-500: #718096;  /* muted forte           */
  --nx-slate-200: #e2e8f0;  /* texto claro           */

  --nx-cyan-500:  #00d4ff;  /* ação primária / marca */
  --nx-green-500: #00ff88;  /* sucesso / "live"      */
  --nx-red-500:   #ff4466;  /* erro / alerta         */
  --nx-amber-500: #f59e0b;  /* aviso / tema claro    */

  /* ── 2. ALIAS — semânticos (dark = padrão) ────────────── */
  --bg:        var(--nx-ink-950);
  --surface:   var(--nx-ink-900);
  --surface2:  var(--nx-ink-800);
  --border:    rgba(255,255,255,0.07);
  --border2:   rgba(255,255,255,0.12);
  --text:      var(--nx-slate-200);
  --muted:     var(--nx-slate-600);
  --muted2:    var(--nx-slate-500);

  --cyan:      var(--nx-cyan-500);
  --cyan-dim:  rgba(0,212,255,0.12);
  --green:     var(--nx-green-500);
  --green-dim: rgba(0,255,136,0.10);
  --red:       var(--nx-red-500);

  /* Aliases semânticos de intenção (novos) */
  --color-action:  var(--cyan);
  --color-success: var(--green);
  --color-danger:  var(--red);
  --color-warning: var(--nx-amber-500);

  /* ── 3. TIPOGRAFIA ────────────────────────────────────── */
  --font-mono: 'JetBrains Mono', ui-monospace, 'Cascadia Code', monospace;
  --font-sans: 'Geist', system-ui, -apple-system, sans-serif;

  /* Escala modular fluida (clamp: mobile → desktop) */
  --text-2xs: clamp(0.60rem, 0.57rem + 0.15vw, 0.68rem);
  --text-xs:  clamp(0.70rem, 0.66rem + 0.20vw, 0.80rem);
  --text-sm:  clamp(0.82rem, 0.78rem + 0.25vw, 0.95rem);
  --text-md:  clamp(0.95rem, 0.90rem + 0.35vw, 1.10rem);
  --text-lg:  clamp(1.15rem, 1.05rem + 0.55vw, 1.45rem);
  --text-xl:  clamp(1.50rem, 1.30rem + 1.00vw, 2.10rem);
  --text-2xl: clamp(1.90rem, 1.55rem + 1.80vw, 2.90rem);
  --text-3xl: clamp(2.40rem, 1.85rem + 2.80vw, 4.00rem);

  --weight-light:   300;
  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semibold:600;
  --weight-bold:    700;

  --leading-tight: 1.15;
  --leading-snug:  1.35;
  --leading-normal:1.6;
  --leading-loose: 1.8;

  --tracking-tight: -0.03em;
  --tracking-normal: 0;
  --tracking-wide:  0.08em;
  --tracking-wider: 0.14em;

  /* ── 4. ESPAÇAMENTO — base 4px ────────────────────────── */
  --space-3xs: 0.25rem;  /*  4px */
  --space-2xs: 0.5rem;   /*  8px */
  --space-xs:  0.75rem;  /* 12px */
  --space-sm:  1rem;     /* 16px */
  --space-md:  1.5rem;   /* 24px */
  --space-lg:  2rem;     /* 32px */
  --space-xl:  3rem;     /* 48px */
  --space-2xl: 4rem;     /* 64px */
  --space-3xl: 6rem;     /* 96px */

  /* ── 5. RAIO ──────────────────────────────────────────── */
  --radius-xs: 2px;
  --radius-sm: 3px;
  --radius-md: 6px;
  --radius-lg: 10px;
  --radius-xl: 16px;
  --radius-full: 999px;

  /* Corte "chanfrado" característico da marca (botões) */
  --clip-chamfer: polygon(6px 0%, 100% 0%, calc(100% - 6px) 100%, 0% 100%);

  /* ── 6. ELEVAÇÃO / GLOW ───────────────────────────────── */
  --elevation-1: 0 1px 3px rgba(0,0,0,0.30);
  --elevation-2: 0 4px 12px rgba(0,0,0,0.35);
  --elevation-3: 0 12px 32px rgba(0,0,0,0.45);
  --glow-cyan:  0 0 28px rgba(0,212,255,0.18);
  --glow-green: 0 6px 24px rgba(0,255,136,0.20);

  /* ── 7. MOTION ────────────────────────────────────────── */
  --duration-fast:   150ms;
  --duration-normal: 250ms;
  --duration-slow:   400ms;
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring:   cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ── 8. LAYOUT ────────────────────────────────────────── */
  --container-max: 1100px;
  --z-nav: 100;
  --z-modal: 200;
  --z-overlay: 300;
}

/* ── TEMA CLARO — sobrescreve apenas os alias ───────────── */
body.light {
  --bg:        #f0f4f8;
  --surface:   #ffffff;
  --surface2:  #f1f5f9;
  --border:    rgba(0,0,0,0.08);
  --border2:   rgba(0,0,0,0.13);
  --text:      #0f172a;
  --muted:     #94a3b8;
  --muted2:    #64748b;
  --cyan:      #0099c8;
  --cyan-dim:  rgba(0,153,200,0.10);
  --green:     #00a854;
  --green-dim: rgba(0,168,84,0.10);
  --red:       #dc2626;

  --elevation-1: 0 1px 3px rgba(0,0,0,0.08);
  --elevation-2: 0 4px 12px rgba(0,0,0,0.10);
  --elevation-3: 0 12px 32px rgba(0,0,0,0.14);
  --glow-cyan:  0 0 24px rgba(0,153,200,0.16);
  --glow-green: 0 6px 24px rgba(0,168,84,0.18);
}

/* Acessibilidade: respeitar redução de movimento (skill: accessibility-audit) */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}