/* ─── Primitives ──────────────────────────────────────────────────── */
:root {
  /* Gray scale */
  --primitive-gray-50:  #F8FAFC;
  --primitive-gray-100: #F1F5F9;
  --primitive-gray-200: #E2E8F0;
  --primitive-gray-300: #CBD5E1;
  --primitive-gray-400: #94A3B8;
  --primitive-gray-500: #64748B;
  --primitive-gray-600: #475569;
  --primitive-gray-700: #334155;
  --primitive-gray-800: #1E293B;
  --primitive-gray-900: #0F172A;
  --primitive-gray-950: #020617;
  --primitive-white:    #FFFFFF;

  /* Brand */
  --primitive-brand-01:     #3A0CA3;

  /* Status Colors — Extraído de badge styles */
  --primitive-success:        #16a34a;
  --primitive-success-light:  #dcfce7;
  --primitive-success-hover:  #bbf7d0;
  --primitive-success-bg:     #f0fdf4;
  
  --primitive-warning:        #a16207;
  --primitive-warning-light:  #fef9c3;
  --primitive-warning-hover:  #fef08a;
  --primitive-warning-bg:     #fefce8;
  
  --primitive-danger:         #991B1B;
  --primitive-danger-light:   #fee2e2;
  --primitive-danger-hover:   #fecaca;
  --primitive-danger-bg:      #fef2f2;
  
  --primitive-primary-light:  #eef2ff;
  --primitive-primary-hover:  #e0e7ff;

  /* Spacing */
  --primitive-space-1:  4px;
  --primitive-space-2:  8px;
  --primitive-space-3:  12px;
  --primitive-space-4:  16px;
  --primitive-space-6:  24px;
  --primitive-space-8:  32px;
  --primitive-space-12: 48px;
  --primitive-space-24: 96px;
  --primitive-space-32: 128px;

  /* Font Size */
  --primitive-font-xs:   10px;
  --primitive-font-sm:   13px;
  --primitive-font-body: 16px;
  --primitive-font-lead: 20px;
  --primitive-font-h5:   25px;
  --primitive-font-h4:   31px;
  --primitive-font-h3:   39px;
  --primitive-font-h2:   49px;
  --primitive-font-h1:   61px;

  /* Radius */
  --primitive-radius-base: 4px;
  --primitive-radius-md:   6px;
  --primitive-radius-lg:   8px;
  --primitive-radius-xl:   12px;
  --primitive-radius-2xl:  16px;
  --primitive-radius-3xl:  24px;
  --primitive-radius-full: 9999px;
}

/* ─── Semantic tokens ──────────────────────────────────────────────── */
:root {
  /* Text — Primary hierarchy */
  --text-primary:     var(--primitive-gray-900);
  --text-secondary:   var(--primitive-gray-700);
  --text-brand:       var(--primitive-brand-01);
  --text-accent:      var(--primitive-gray-600);
  --text-body:        var(--primitive-gray-700);
  --text-inverted:    var(--primitive-gray-50);
  --text-placeholder: var(--primitive-gray-400);

  /* Text — Status colors */
  --text-success:     var(--primitive-success);
  --text-warning:     var(--primitive-warning);
  --text-danger:      var(--primitive-danger);

  /* Border */
  --border-primary:   var(--primitive-gray-900);
  --border-secondary: var(--primitive-gray-700);
  --border-brand:     var(--primitive-brand-01);
  --border-inverted:  var(--primitive-gray-50);
  --border-light:     var(--primitive-gray-300);

  /* Surface — Backgrounds */
  --surface-primary:   var(--primitive-gray-100);
  --surface-secondary: var(--primitive-gray-200);
  --surface-accent:    var(--primitive-gray-300);
  --surface-brand-subtle: color-mix(in srgb, var(--primitive-brand-01) 12%, white);
  --surface-brand-subtle-hover: color-mix(in srgb, var(--primitive-brand-01) 18%, white);
  --surface-brand:     var(--primitive-brand-01);
  --surface-brand-hover: color-mix(in srgb, var(--primitive-brand-01) 88%, black);
  --surface-inverted:  var(--primitive-white);

  /* Surface — Status backgrounds (light tinted) */
  --surface-success:       var(--primitive-success-bg);
  --surface-success-hover: var(--primitive-success-hover);
  --surface-warning:       var(--primitive-warning-bg);
  --surface-warning-hover: var(--primitive-warning-hover);
  --surface-danger:        var(--primitive-danger-bg);
  --surface-danger-hover:  var(--primitive-danger-hover);

  /* Background — Status fills (intermediate shades) */
  --bg-success:       var(--primitive-success-light);
  --bg-success-hover: var(--primitive-success-hover);
  --bg-warning:       var(--primitive-warning-light);
  --bg-warning-hover: var(--primitive-warning-hover);
  --bg-danger:        var(--primitive-danger-light);
  --bg-danger-hover:  var(--primitive-danger-hover);

  /* Background — Primary */
  --bg-primary:   var(--primitive-gray-100);
  --bg-secondary: var(--primitive-gray-700);
  --bg-accent:    var(--primitive-gray-900);
  --bg-brand:     var(--primitive-brand-01);
  --bg-brand-hover: color-mix(in srgb, var(--primitive-brand-01) 78%, black);
  --bg-inverted:  var(--primitive-white);
  --bg-primary-hover:  var(--primitive-gray-200);

  /* Spacing — Padding */
  --p-xs:  var(--primitive-space-1);
  --p-sm:  var(--primitive-space-2);
  --p-base: var(--primitive-space-3);
  --p-lg:  var(--primitive-space-6);
  --p-xl:  var(--primitive-space-8);
  --p-2xl: var(--primitive-space-12);
  --p-3xl: var(--primitive-space-24);
  --p-4xl: var(--primitive-space-32);

  /* Spacing — Gap */
  --gap-sm:  var(--primitive-space-3);
  --gap:     var(--primitive-space-4);
  --gap-lg:  var(--primitive-space-6);
  --gap-xl:  var(--primitive-space-8);
  --gap-2xl: var(--primitive-space-12);
  --gap-3xl: 64px;

  /* Font Size */
  --font-size-xs:   var(--primitive-font-xs);
  --font-size-sm:   var(--primitive-font-sm);
  --font-size-body: var(--primitive-font-body);
  --font-size-lead: var(--primitive-font-lead);
  --font-size-h6:   var(--primitive-font-lead);
  --font-size-h5:   var(--primitive-font-h5);
  --font-size-h4:   var(--primitive-font-h4);
  --font-size-h3:   var(--primitive-font-h3);
  --font-size-h2:   var(--primitive-font-h2);
  --font-size-h1:   var(--primitive-font-h1);

  /* Border Radius */
  --rounded-base: var(--primitive-radius-base);
  --rounded-md:   var(--primitive-radius-md);
  --rounded-lg:   var(--primitive-radius-lg);
  --rounded-xl:   var(--primitive-radius-xl);
  --rounded-2xl:  var(--primitive-radius-2xl);
  --rounded-3xl:  var(--primitive-radius-3xl);
  --rounded-full: var(--primitive-radius-full);
}

/* ─── Aliases de compatibilidade (componentes existentes) ──────────── */
:root {
  /* Legacy color aliases → semantic mapping */
  --color-ink:            var(--text-primary);
  --color-ink-muted:      var(--text-body);
  --color-surface:        var(--surface-inverted);
  --color-bg:             var(--surface-primary);
  --color-border:         var(--border-light);
  --color-border-strong:  var(--border-primary);
  --color-accent:         var(--text-accent);
  --color-accent-subtle:  var(--surface-primary);
  --color-danger:         var(--text-danger);

  /* Font and spacing aliases */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;

  --text-xs:   var(--font-size-xs);
  --text-sm:   var(--font-size-sm);
  --text-base: var(--font-size-body);
  --text-md:   var(--font-size-lead);
  --text-lg:   var(--font-size-lead);

  --space-1: var(--p-xs);
  --space-2: var(--p-sm);
  --space-3: var(--p-base);
  --space-4: var(--gap);
  --space-5: 20px;
  --space-6: var(--p-lg);
  --space-8: var(--p-xl);

  --radius-sm: var(--rounded-base);
  --radius-md: var(--rounded-md);
  --radius-lg: var(--rounded-lg);

  --transition: 140ms ease;
}