/* ═══════════════════════════════════════════════════
   SAAS NEGÓCIOS — Design Tokens
   Fonte da verdade para cores, tipografia e espaçamento
   ═══════════════════════════════════════════════════ */

:root {
  /* ── Typefaces ── */
  --font-display: 'Syne', sans-serif;
  --font-body:    'DM Sans', sans-serif;
  --font-mono:    'DM Mono', monospace;

  /* ── Type scale ── */
  --text-xs:   11px;
  --text-sm:   12px;
  --text-base: 14px;
  --text-md:   15px;
  --text-lg:   18px;
  --text-xl:   22px;
  --text-2xl:  28px;
  --text-3xl:  36px;

  --weight-normal:   400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  --leading-tight:  1.25;
  --leading-normal: 1.5;
  --leading-loose:  1.7;

  /* ── Spacing scale (base 4px) ── */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* ── Border radius ── */
  --radius-sm:  6px;
  --radius-md:  10px;
  --radius-lg:  14px;
  --radius-xl:  20px;
  --radius-full: 9999px;

  /* ── Transitions ── */
  --ease-fast:   all 0.12s ease;
  --ease-normal: all 0.2s ease;
  --ease-slow:   all 0.35s cubic-bezier(0.16, 1, 0.3, 1);

  /* ── Shadows ── */
  --shadow-sm: 0 1px 4px rgba(0,0,0,0.3);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.4);
  --shadow-lg: 0 8px 32px rgba(0,0,0,0.5);
  --shadow-accent: 0 0 0 3px rgba(79,142,247,0.25);

  /* ── Z-index scale ── */
  --z-base:    0;
  --z-sticky:  100;
  --z-overlay: 500;
  --z-modal:   1000;
  --z-toast:   9999;
}

/* ═══════════════════════════════════════════════════
   DARK THEME (default)
   ═══════════════════════════════════════════════════ */
[data-theme="dark"], :root {
  /* Backgrounds */
  --bg-base:    #0a0c0f;
  --bg-surface: #111318;
  --bg-card:    #161a21;
  --bg-hover:   #1c2029;
  --bg-active:  #222730;
  --bg-input:   #161a21;

  /* Borders */
  --border-subtle:  rgba(255,255,255,0.055);
  --border-default: rgba(255,255,255,0.09);
  --border-strong:  rgba(255,255,255,0.15);
  --border-accent:  rgba(79,142,247,0.35);

  /* Text */
  --text-primary:   #e8eaf0;
  --text-secondary: #8b909e;
  --text-tertiary:  #4e5464;
  --text-disabled:  #363b47;
  --text-inverse:   #0a0c0f;

  /* Brand accent */
  --accent:         #4f8ef7;
  --accent-hover:   #3a7cf5;
  --accent-subtle:  rgba(79,142,247,0.1);
  --accent-border:  rgba(79,142,247,0.25);

  /* Semantic */
  --green:          #22c55e;
  --green-subtle:   rgba(34,197,94,0.1);
  --green-border:   rgba(34,197,94,0.2);

  --red:            #ef4444;
  --red-subtle:     rgba(239,68,68,0.1);
  --red-border:     rgba(239,68,68,0.2);

  --yellow:         #f59e0b;
  --yellow-subtle:  rgba(245,158,11,0.1);
  --yellow-border:  rgba(245,158,11,0.2);

  --purple:         #a78bfa;
  --purple-subtle:  rgba(167,139,250,0.1);
  --purple-border:  rgba(167,139,250,0.2);

  --teal:           #2dd4bf;
  --teal-subtle:    rgba(45,212,191,0.1);
  --teal-border:    rgba(45,212,191,0.2);

  /* Sidebar width */
  --sidebar-w: 224px;
}

/* ═══════════════════════════════════════════════════
   LIGHT THEME
   ═══════════════════════════════════════════════════ */
[data-theme="light"] {
  --bg-base:    #f4f5f7;
  --bg-surface: #ffffff;
  --bg-card:    #ffffff;
  --bg-hover:   #f0f1f4;
  --bg-active:  #e8eaf0;
  --bg-input:   #f8f9fb;

  --border-subtle:  rgba(0,0,0,0.05);
  --border-default: rgba(0,0,0,0.09);
  --border-strong:  rgba(0,0,0,0.15);
  --border-accent:  rgba(37,99,235,0.35);

  --text-primary:   #111318;
  --text-secondary: #5a6070;
  --text-tertiary:  #9299a8;
  --text-disabled:  #c5c9d4;
  --text-inverse:   #ffffff;

  --accent:         #2563eb;
  --accent-hover:   #1d4ed8;
  --accent-subtle:  rgba(37,99,235,0.08);
  --accent-border:  rgba(37,99,235,0.2);

  --green:          #16a34a;
  --green-subtle:   rgba(22,163,74,0.08);
  --green-border:   rgba(22,163,74,0.2);

  --red:            #dc2626;
  --red-subtle:     rgba(220,38,38,0.08);
  --red-border:     rgba(220,38,38,0.2);

  --yellow:         #d97706;
  --yellow-subtle:  rgba(217,119,6,0.08);
  --yellow-border:  rgba(217,119,6,0.2);

  --purple:         #7c3aed;
  --purple-subtle:  rgba(124,58,237,0.08);
  --purple-border:  rgba(124,58,237,0.2);

  --teal:           #0d9488;
  --teal-subtle:    rgba(13,148,136,0.08);
  --teal-border:    rgba(13,148,136,0.2);
}