/* ==========================================================================
   Design Tokens
   ==========================================================================
   Two layers: primitives name the raw values; semantics name the roles.
   Components consume semantics. Primitives are available as an escape hatch.

   Namespace: --arp-*
   ========================================================================== */

:root {
  /* ---- Color primitives (Tailwind scale) ---- */

  /* Neutrals */
  --arp-gray-50:  #f9fafb;
  --arp-gray-100: #f3f4f6;
  --arp-gray-200: #e5e7eb;
  --arp-gray-300: #d1d5db;
  --arp-gray-400: #9ca3af;
  --arp-gray-500: #6b7280;
  --arp-gray-600: #4b5563;
  --arp-gray-700: #374151;
  --arp-gray-800: #1f2937;
  --arp-gray-900: #111827;

  /* Brand blue */
  --arp-blue-50:  #eff6ff;
  --arp-blue-400: #60a5fa;
  --arp-blue-500: #3b82f6;
  --arp-blue-600: #2563eb;
  --arp-blue-900: #1e3a5f;

  /* Success green */
  --arp-green-50:  #ecfdf5;
  --arp-green-300: #6ee7b7;
  --arp-green-400: #34d399;
  --arp-green-500: #10b981;
  --arp-green-600: #059669;
  --arp-green-700: #047857;
  --arp-green-900: #064e3b;

  /* Danger red */
  --arp-red-50:  #fef2f2;
  --arp-red-300: #fca5a5;
  --arp-red-400: #f87171;
  --arp-red-500: #ef4444;
  --arp-red-600: #dc2626;
  --arp-red-700: #b91c1c;
  --arp-red-900: #450a0a;

  /* Warning amber */
  --arp-amber-50:  #fef3c7;
  --arp-amber-300: #fcd34d;
  --arp-amber-400: #fbbf24;
  --arp-amber-500: #f59e0b;
  --arp-amber-600: #d97706;
  --arp-amber-700: #b45309;
  --arp-amber-900: #78350f;

  /* ---- Spacing primitives (4px rhythm + half-steps) ---- */

  --arp-space-0-5: 0.125rem;  /*  2px */
  --arp-space-1:   0.25rem;   /*  4px */
  --arp-space-1-5: 0.375rem;  /*  6px */
  --arp-space-2:   0.5rem;    /*  8px */
  --arp-space-2-5: 0.625rem;  /* 10px */
  --arp-space-3:   0.75rem;   /* 12px */
  --arp-space-4:   1rem;      /* 16px */
  --arp-space-5:   1.25rem;   /* 20px */
  --arp-space-6:   1.5rem;    /* 24px */
  --arp-space-8:   2rem;      /* 32px */
  --arp-space-10:  2.5rem;    /* 40px */
  --arp-space-12:  3rem;      /* 48px */

  /* ---- Radius primitives ---- */

  --arp-radius-xs:    4px;
  --arp-radius-sm:    6px;
  --arp-radius-md:    8px;
  --arp-radius-lg:   10px;
  --arp-radius-full: 9999px;

  /* ---- Shadow primitives ---- */

  --arp-shadow-sm:  0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
  --arp-shadow-md:  0 2px 8px rgba(0, 0, 0, 0.08);
  --arp-shadow-lg:  0 4px 12px rgba(0, 0, 0, 0.15);
  --arp-shadow-xl:  0 4px 12px rgba(0, 0, 0, 0.3);

  /* ---- Semantic: Surface ---- */

  --arp-surface:         #ffffff;
  --arp-surface-raised:  #ffffff;
  --arp-surface-muted:   var(--arp-gray-50);
  --arp-surface-sunken:  var(--arp-gray-100);

  /* ---- Semantic: Text ---- */

  --arp-text-primary:    var(--arp-gray-800);
  --arp-text-secondary:  var(--arp-gray-600);
  --arp-text-muted:      var(--arp-gray-500);
  --arp-text-disabled:   var(--arp-gray-400);

  /* ---- Semantic: Border ---- */

  --arp-border:          var(--arp-gray-200);
  --arp-border-subtle:   var(--arp-gray-100);
  --arp-border-strong:   var(--arp-gray-300);

  /* ---- Semantic: Status ---- */

  --arp-status-info-bg:        var(--arp-blue-50);
  --arp-status-info-fg:        var(--arp-blue-600);
  --arp-status-info-border:    var(--arp-blue-500);

  --arp-status-success-bg:     var(--arp-green-50);
  --arp-status-success-fg:     var(--arp-green-600);
  --arp-status-success-border: var(--arp-green-500);

  --arp-status-warning-bg:     var(--arp-amber-50);
  --arp-status-warning-fg:     var(--arp-amber-600);
  --arp-status-warning-border: var(--arp-amber-500);

  --arp-status-danger-bg:      var(--arp-red-50);
  --arp-status-danger-fg:      var(--arp-red-600);
  --arp-status-danger-border:  var(--arp-red-500);

  --arp-status-neutral-bg:     var(--arp-gray-100);
  --arp-status-neutral-fg:     var(--arp-gray-500);
  --arp-status-neutral-border: var(--arp-gray-300);

  /* ---- Semantic: Accent ---- */

  --arp-accent:     var(--arp-blue-500);
  --arp-accent-bg:  var(--arp-blue-50);

  /* ---- Semantic: Pill padding ---- */
  /* Exact values finalized during Phase 2 pilot */

  --arp-pill-padding-sm: 0.125rem 0.5rem;
  --arp-pill-padding-md: 0.25rem  0.625rem;
}

/* ---- Dark mode overrides ---- */

[data-theme="dark"] {
  --arp-surface:         var(--arp-gray-900);
  --arp-surface-raised:  var(--arp-gray-800);
  --arp-surface-muted:   #1a1f2e;
  --arp-surface-sunken:  var(--arp-gray-900);

  --arp-text-primary:    var(--arp-gray-50);
  --arp-text-secondary:  var(--arp-gray-300);
  --arp-text-muted:      var(--arp-gray-400);
  --arp-text-disabled:   var(--arp-gray-600);

  --arp-border:          var(--arp-gray-700);
  --arp-border-subtle:   var(--arp-gray-800);
  --arp-border-strong:   var(--arp-gray-600);

  --arp-status-info-bg:        var(--arp-blue-900);
  --arp-status-info-fg:        var(--arp-blue-400);
  --arp-status-info-border:    var(--arp-blue-500);

  --arp-status-success-bg:     var(--arp-green-900);
  --arp-status-success-fg:     var(--arp-green-400);
  --arp-status-success-border: var(--arp-green-500);

  --arp-status-warning-bg:     var(--arp-amber-900);
  --arp-status-warning-fg:     var(--arp-amber-300);
  --arp-status-warning-border: var(--arp-amber-500);

  --arp-status-danger-bg:      var(--arp-red-900);
  --arp-status-danger-fg:      var(--arp-red-400);
  --arp-status-danger-border:  var(--arp-red-500);

  --arp-status-neutral-bg:     var(--arp-gray-700);
  --arp-status-neutral-fg:     var(--arp-gray-400);
  --arp-status-neutral-border: var(--arp-gray-600);

  --arp-accent:     var(--arp-blue-400);
  --arp-accent-bg:  var(--arp-blue-900);
}