/* ============================================================
   PackTrack — Design Tokens (CSS Variables)
   Copiado y adaptado de TiendaCloud / eCommerce
   ============================================================ */
:root {
  /* ── Brand (purple) ───────────────────────────────────────── */
  --brand-50:  #fdf4ff;
  --brand-100: #fae8ff;
  --brand-200: #f3d0fe;
  --brand-300: #e9a8fd;
  --brand-400: #c084fc;
  --brand-500: #a855f7;
  --brand-600: #9333ea;
  --brand-700: #7e22ce;
  --brand-800: #6b21a8;
  --brand-900: #581c87;
  --brand:          #a855f7;
  --brand-contrast: #ffffff;

  /* ── Accent ────────────────────────────────────────────────── */
  --accent-500: #f472b6;
  --accent:          #f472b6;
  --accent-contrast: #ffffff;

  /* ── Neutrales ─────────────────────────────────────────────── */
  --neutral-50:  #f7f9fc;
  --neutral-100: #f1f4f9;
  --neutral-200: #e5e9f0;
  --neutral-300: #d4d9e2;
  --neutral-400: #b9c2cf;
  --neutral-500: #99a5b6;
  --neutral-600: #738196;
  --neutral-700: #5b677a;
  --neutral-800: #434d5b;
  --neutral-900: #2c323c;

  /* ── Surfaces ──────────────────────────────────────────────── */
  --surface-0:       #f4f7fb;
  --surface-1:       #ffffff;
  --surface-2:       #eef3f9;
  --surface-inverse: #0b1220;

  /* ── Texto ─────────────────────────────────────────────────── */
  --text-1:       #1f2937;
  --text-2:       #4b5563;
  --text-3:       #94a3b8;
  --text-inverse: #ffffff;

  /* ── Bordes ────────────────────────────────────────────────── */
  --border-subtle: #e5e7eb;
  --border:        #d1d5db;
  --border-strong: #9aa3af;

  /* ── States ────────────────────────────────────────────────── */
  --state-hover:  rgba(168,85,247,.08);
  --state-active: rgba(168,85,247,.16);

  /* ── Focus ─────────────────────────────────────────────────── */
  --focus-ring-color: rgba(168,85,247,.35);
  --focus-ring:       0 0 0 3px rgba(168,85,247,.35);

  /* ── Semánticos ────────────────────────────────────────────── */
  --success:        #16a34a;
  --success-on:     #ffffff;
  --success-soft:   #e9f7ef;
  --success-border: #b7e3c8;

  --warning:        #f59e0b;
  --warning-on:     #1f1300;
  --warning-soft:   #fff7e6;
  --warning-border: #fad7a0;

  --danger:        #dc2626;
  --danger-on:     #ffffff;
  --danger-soft:   #ffecec;
  --danger-border: #f7b4b4;
  --danger-muted:  #f87171;

  --info:        #0284c7;
  --info-on:     #ffffff;
  --info-soft:   #e6f4ff;
  --info-border: #a6d8ff;
  --info-muted:  #60a5fa;

  /* ── Sombras ───────────────────────────────────────────────── */
  --shadow-sm: 0 1px 2px rgba(15,23,42,.06);
  --shadow-md: 0 2px 4px rgba(15,23,42,.08), 0 1px 2px rgba(15,23,42,.06);
  --shadow-lg: 0 8px 24px rgba(15,23,42,.14);
  --backdrop:  rgba(16,24,40,.55);

  /* ── Botones ───────────────────────────────────────────────── */
  --btn-primary-bg:    #a855f7;
  --btn-primary-text:  #ffffff;
  --btn-primary-hover: #9333ea;

  /* ── Aliases Bootstrap ─────────────────────────────────────── */
  --bs-primary:     #a855f7;
  --bs-success:     #16a34a;
  --bs-warning:     #f59e0b;
  --bs-danger:      #dc2626;
  --bs-body-bg:     var(--surface-0);
  --bs-body-color:  var(--text-1);
  --bs-border-color: var(--border);

  /* ── Aliases semánticos (compatibilidad con módulos) ────────── */
  --color-primary:          var(--brand);
  --color-primary-dark:     var(--brand-800);
  --color-primary-light:    var(--brand-50);
  --color-secondary:        var(--accent);
  --color-secondary-light:  var(--accent-50, #e8f2fd);
  --color-surface:          var(--surface-1);
  --color-background:       var(--surface-0);
  --color-text-primary:     var(--text-1);
  --color-text-secondary:   var(--text-2);
  --color-text-tertiary:    var(--text-3);
  --color-border:           var(--border);
  --color-error:            var(--danger);
  --color-success:          var(--success);
  --color-primary-rgb:      168, 85, 247;
  --color-error-rgb:        220, 38, 38;

  /* ── Landing Page ──────────────────────────────────────────── */
  --lp-ink:       #0D1117;
  --lp-ink2:      #1C2333;
  --lp-ink3:      #2A3550;
  --lp-teal:      #a855f7;
  --lp-teal2:     #9333ea;
  --lp-teal-glow: rgba(168,85,247,0.18);
  --lp-muted:     #6B7A99;
  --lp-border:    rgba(255,255,255,0.08);
  --lp-white:     #FFFFFF;
  --lp-card:      rgba(255,255,255,0.04);
}

/* ── Tema oscuro ───────────────────────────────────────────── */
[data-theme="dark"] {
  --surface-0:       #0D1117;
  --surface-1:       #1C2333;
  --surface-2:       #2A3550;
  --surface-inverse: #ffffff;
  --text-1:    #e5eaf3;
  --text-2:    #b8c2d6;
  --text-3:    #94a3b8;
  --border-subtle: #1C2333;
  --border:        rgba(255,255,255,0.08);
  --border-strong: rgba(255,255,255,0.16);
}