/* ============================================================
   VGS Comm — Design Tokens (pixel-retro)
   Fonte de verdade: docs/layout-suggestions/vgs-comm-retro-trade/proposta.html
   Aplicação: §9 passo 1 — ainda NÃO referenciado pelo CSS atual.
   A substituição de valores acontece no passo 2 (css/app.css).
   ============================================================ */
:root, [data-theme="dark"]{
  color-scheme: dark;

  /* superfícies */
  --bg:#0a0a12; --bg-deep:#06060b; --surface:#12121c; --surface-2:#1a1a28; --surface-3:#232338;
  --border:#2e2e45; --border-strong:#4a4a6a;

  /* texto (contraste verificado sobre --surface) */
  --text:#f2f2f7;        /* 16.7:1 */
  --text-muted:#a6a6bd;  /*  7.8:1 */
  --text-faint:#7c7c94;  /*  4.6:1 — só metadado */

  /* marca */
  --accent:#8b5cf6; --accent-2:#ec4899; --accent-text:#b79dff; /* 8.2:1 */
  --accent-soft:rgba(139,92,246,.16);
  --cta-from:#7c3aed; --cta-to:#db2777; /* branco: 5.7:1 / 4.6:1 */
  --on-accent:#ffffff;

  /* semântica */
  --ok:#4ade80;   --ok-soft:rgba(74,222,128,.14);    /* 10.7:1 */
  --warn:#fbbf24; --warn-soft:rgba(251,191,36,.14);  /* 11.1:1 */
  --bad:#f87171;  --bad-soft:rgba(248,113,113,.14);  /*  6.7:1 */
  --info:#38bdf8; --info-soft:rgba(56,189,248,.14);  /*  8.7:1 */

  /* elevação pixel (hard shadow, sem blur) */
  --shadow-hard:4px 4px 0 0 #05050a;
  --shadow-hard-sm:2px 2px 0 0 #05050a;

  /* tipografia */
  --font-display:'Silkscreen','Courier New',monospace;
  --font-body:'Space Grotesk',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,'SFMono-Regular',monospace;
  --fs-xs:.6875rem; --fs-sm:.8125rem; --fs-md:.9375rem; --fs-lg:1.125rem; --fs-xl:1.5rem; --fs-2xl:2rem;
  --lh-tight:1.2; --lh-body:1.55;

  /* espaço (base 4px) */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px; --sp-7:48px;

  /* geometria: cantos quase retos (identidade pixel) */
  --r-sm:2px; --r-md:4px; --r-lg:8px; --r-full:999px;
  --t-fast:.12s; --t-med:.2s;
}
[data-theme="light"]{
  color-scheme: light;
  --bg:#f2f2f7; --bg-deep:#e8e8f0; --surface:#ffffff; --surface-2:#f5f5fa; --surface-3:#ebebf4;
  --border:#d4d4e0; --border-strong:#a8a8bd;
  --text:#17171f;        /* 17.8:1 */
  --text-muted:#55556a;  /*  7.3:1 */
  --text-faint:#70708a;  /*  4.8:1 */
  --accent:#7c3aed; --accent-2:#db2777; --accent-text:#6d28d9; /* 7.1:1 */
  --accent-soft:rgba(124,58,237,.12);
  --cta-from:#6d28d9; --cta-to:#be185d; /* branco: 7.1:1 / 6.0:1 */
  --ok:#15803d;   --ok-soft:rgba(21,128,61,.10);   /* 5.0:1 */
  --warn:#b45309; --warn-soft:rgba(180,83,9,.10);  /* 5.0:1 */
  --bad:#b91c1c;  --bad-soft:rgba(185,28,28,.10);  /* 6.5:1 */
  --info:#0369a1; --info-soft:rgba(3,105,161,.10); /* 5.9:1 */
  --shadow-hard:4px 4px 0 0 #c9c9d6;
  --shadow-hard-sm:2px 2px 0 0 #c9c9d6;
}