/* ─────────────────────────────────────────
   AGENCY OS — COLOR TOKENS
   Hierarquia: primitives → semantic → brand
   ───────────────────────────────────────── */

:root {

  /* ── PRIMITIVES (não usar diretamente) ── */
  --_black:     #0A0A0A;
  --_white:     #FFFFFF;
  --_gray-50:   #F9F9F9;
  --_gray-100:  #F3F3F3;
  --_gray-200:  #E8E8E8;
  --_gray-300:  #D1D1D1;
  --_gray-400:  #A3A3A3;
  --_gray-500:  #737373;
  --_gray-600:  #525252;
  --_gray-700:  #404040;
  --_gray-800:  #262626;
  --_gray-900:  #171717;
  --_gray-950:  #0D0D0D;

  /* ── BRAND (sobrescrever por projeto) ── */
  --color-brand:        #6366F1;
  --color-brand-light:  #818CF8;
  --color-brand-dark:   #4F46E5;
  --color-brand-subtle: rgba(99, 102, 241, 0.08);
  --color-brand-glow:   rgba(99, 102, 241, 0.20);

  /* ── SEMANTIC ── */
  --color-bg:           var(--_white);
  --color-bg-secondary: var(--_gray-50);
  --color-bg-tertiary:  var(--_gray-100);
  --color-bg-inverse:   var(--_gray-950);

  --color-text:         var(--_gray-900);
  --color-text-secondary: var(--_gray-500);
  --color-text-tertiary:  var(--_gray-400);
  --color-text-inverse: var(--_white);
  --color-text-brand:   var(--color-brand);

  --color-border:       var(--_gray-200);
  --color-border-strong: var(--_gray-300);
  --color-border-subtle: rgba(0, 0, 0, 0.06);

  /* ── FEEDBACK ── */
  --color-success: #10B981;
  --color-warning: #F59E0B;
  --color-error:   #EF4444;
  --color-info:    #3B82F6;

  /* ── OVERLAY ── */
  --color-overlay-sm: rgba(0, 0, 0, 0.30);
  --color-overlay-md: rgba(0, 0, 0, 0.60);
  --color-overlay-lg: rgba(0, 0, 0, 0.80);

  /* ── GRADIENTS ── */
  --gradient-brand:   linear-gradient(135deg, var(--color-brand), var(--color-brand-dark));
  --gradient-surface: linear-gradient(180deg, var(--color-bg) 0%, var(--color-bg-secondary) 100%);
  --gradient-dark:    linear-gradient(180deg, var(--_gray-900) 0%, var(--_black) 100%);
  --gradient-glow:    radial-gradient(ellipse at 50% 0%, var(--color-brand-glow) 0%, transparent 70%);
}

/* ── DARK MODE ── */
[data-theme="dark"] {
  --color-bg:           var(--_gray-950);
  --color-bg-secondary: var(--_gray-900);
  --color-bg-tertiary:  var(--_gray-800);
  --color-bg-inverse:   var(--_white);

  --color-text:         var(--_gray-50);
  --color-text-secondary: var(--_gray-400);
  --color-text-tertiary:  var(--_gray-500);
  --color-text-inverse: var(--_gray-900);

  --color-border:       var(--_gray-800);
  --color-border-strong: var(--_gray-700);
  --color-border-subtle: rgba(255, 255, 255, 0.06);
}