/* ============================================================================
   Capi Când-IA Pro — Design Tokens (Fase 0)
   Fonte única de verdade pros valores visuais do app.
   Dark-only nesta fase. Light parqueado (ver spec §8).
   ============================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Inter+Tight:wght@600;700;800&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* ─── Surfaces ─── */
  --ds-bg:           #0a0a0a;
  --ds-surface:      #111110;
  --ds-surface-2:    #1a1a1a;
  --ds-surface-3:    #222020;

  /* ─── Borders ─── */
  --ds-border:       rgba(255,255,255,0.08);
  --ds-border-2:     rgba(255,255,255,0.14);

  /* ─── Text ─── */
  --ds-text:         #fafafa;
  --ds-text-2:       #aaaaaa;
  --ds-text-muted:   #666666;

  /* ─── Gold (único acento da marca) ─── */
  --ds-gold:         #D4A017;
  --ds-gold-hover:   #E8B319;
  --ds-gold-dim:     rgba(212,160,23,0.10);
  --ds-gold-border:  rgba(212,160,23,0.25);
  --ds-gold-glow:    rgba(212,160,23,0.55);
  --ds-gold-text:    #F5E9CC;

  /* ─── Estados (pontuais, só feedback) ─── */
  --ds-success:      #4ade80;
  --ds-error:        #f87171;
  --ds-warning:      #fbbf24;

  /* ─── Tipografia ─── */
  --ds-font-sans:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --ds-font-display: 'Inter Tight', 'Inter', sans-serif;
  --ds-font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --ds-text-xs:    11px;
  --ds-text-sm:    12px;
  --ds-text-base:  13px;
  --ds-text-md:    14px;
  --ds-text-lg:    16px;
  --ds-text-xl:    22px;
  --ds-text-2xl:   26px;
  --ds-text-3xl:   32px;

  /* ─── Espaçamento ─── */
  --ds-space-xs:   4px;
  --ds-space-sm:   8px;
  --ds-space-md:   12px;
  --ds-space-lg:   16px;
  --ds-space-xl:   20px;
  --ds-space-2xl:  28px;
  --ds-space-3xl:  40px;
  --ds-space-4xl:  64px;

  /* ─── Cantos ─── */
  --ds-radius-sm:    4px;
  --ds-radius:       6px;
  --ds-radius-md:    8px;
  --ds-radius-lg:    10px;
  --ds-radius-xl:    12px;
  --ds-radius-full:  9999px;

  /* ─── Sombras / efeitos ─── */
  --ds-shadow-button-inset: inset 0 1px 0 rgba(255,255,255,0.12);
  --ds-shadow-button-drop:  0 1px 2px rgba(0,0,0,0.3);
  --ds-shadow-focus-gold:   0 0 0 3px rgba(212,160,23,0.10);
  --ds-glow-gold-ambient:   radial-gradient(ellipse at top center, rgba(212,160,23,0.02) 0%, rgba(212,160,23,0.008) 20%, transparent 35%);

  /* ─── Transições ─── */
  --ds-trans:      all 0.18s ease;
  --ds-trans-fast: all 0.12s ease;
}