/* ============================================================
   DashQ — Design tokens (DTCG → CSS)
   Capa 1 primitivos · Capa 2 semánticos. La UI consume solo semánticos.
   ============================================================ */
:root {
  /* ---------- PRIMITIVOS: color ---------- */
  --p-brand-600: #2E5BFF;

  --p-violet-50:  #F1F0FE;
  --p-violet-100: #E9E8FB;
  --p-violet-200: #D6D3F8;
  --p-violet-300: #B4AEF3;
  --p-violet-400: #8B82EE;
  --p-violet-500: #5D5FEF;
  --p-violet-600: #4B3FE4;
  --p-violet-700: #3A2FD0;
  --p-violet-800: #2E259F;
  --p-violet-900: #1F1A66;

  --p-neutral-0:   #FFFFFF;
  --p-neutral-25:  #FAFAFC;
  --p-neutral-50:  #F4F5F8;
  --p-neutral-100: #ECECF1;
  --p-neutral-200: #E1E1E8;
  --p-neutral-300: #CDCDD6;
  --p-neutral-400: #A5A6B3;
  --p-neutral-500: #7A7C8A;
  --p-neutral-600: #6B7280;
  --p-neutral-700: #3F4152;
  --p-neutral-800: #26273A;
  --p-neutral-900: #191A23;
  --p-neutral-950: #1C1C28;

  --p-green-100: #D8F5E3;
  --p-green-500: #22C55E;
  --p-green-600: #16A34A;

  --p-amber-100: #FCF3D9;
  --p-amber-400: #FBBF24;
  --p-amber-500: #F59E0B;

  --p-rose-100: #F7E3E3;
  --p-rose-400: #F87171;
  --p-rose-500: #EF4444;

  --p-cyan-500: #3BC9DB;

  /* ---------- SEMÁNTICOS: color (API pública, light) ---------- */
  --color-bg-app:            var(--p-neutral-50);
  --color-bg-surface:        var(--p-neutral-0);
  --color-bg-surface-subtle: var(--p-neutral-25);
  --color-bg-surface-sunken: var(--p-neutral-50);
  --color-bg-inverse:        var(--p-neutral-950);
  --color-bg-overlay:        #191A2399;

  --color-text-primary:    var(--p-neutral-900);
  --color-text-secondary:  var(--p-neutral-600);
  --color-text-tertiary:   var(--p-neutral-500);
  --color-text-accent:     var(--p-violet-500);
  --color-text-on-primary: var(--p-neutral-0);
  --color-text-on-inverse: var(--p-neutral-0);
  --color-text-disabled:   var(--p-neutral-400);

  --color-border-default: var(--p-neutral-100);
  --color-border-strong:  var(--p-neutral-200);
  --color-border-focus:   var(--p-violet-500);

  --color-action-primary:          var(--p-violet-500);
  --color-action-primary-hover:    var(--p-violet-600);
  --color-action-primary-active:   var(--p-violet-700);
  --color-action-primary-disabled: var(--p-violet-200);
  --color-action-primary-fg:       var(--p-neutral-0);

  --color-action-secondary:       var(--p-neutral-950);
  --color-action-secondary-hover: var(--p-neutral-800);
  --color-action-secondary-fg:    var(--p-neutral-0);

  --color-action-ghost-hover: var(--p-neutral-50);
  --color-action-ghost-fg:    var(--p-neutral-700);

  --color-feedback-success: var(--p-green-500);
  --color-feedback-warning: var(--p-amber-400);
  --color-feedback-danger:  var(--p-rose-500);
  --color-feedback-info:    var(--p-brand-600);

  --color-accent-surface-lavender: var(--p-violet-100);
  --color-accent-surface-amber:    var(--p-amber-100);
  --color-accent-surface-rose:     var(--p-rose-100);

  /* ---------- PRIMITIVOS: dimensión ---------- */
  --space-0: 0px;   --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; --space-18: 72px; --space-20: 80px;

  --radius-xs: 6px;
  --radius-sm: 8px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 9999px;

  --border-hair: 1px;
  --border-thick: 2px;

  --control-sm: 36px;
  --control-md: 44px;
  --control-lg: 52px;

  /* ---------- TIPOGRAFÍA ---------- */
  --font-sans: "Plus Jakarta Sans", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-extrabold: 800;

  --fs-100: 12px; --fs-200: 14px; --fs-300: 16px; --fs-400: 18px;
  --fs-500: 20px; --fs-600: 24px; --fs-700: 28px; --fs-800: 32px; --fs-900: 44px;

  --lh-tight: 1.15;
  --lh-snug: 1.3;
  --lh-normal: 1.5;

  --ls-tight: -0.02em;
  --ls-normal: 0em;
  --ls-wide: 0.04em;

  /* ---------- SOMBRAS ---------- */
  --shadow-sm: 0 1px 2px 0 #191A230A;
  --shadow-md: 0 4px 16px -2px #191A2314;
  --shadow-lg: 0 12px 32px -4px #191A231F;
  --shadow-focus: 0 0 0 3px #5D5FEF3D;

  /* ---------- MOTION ---------- */
  --dur-fast: 150ms;
  --dur-base: 220ms;
  --dur-slow: 320ms;
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
}

/* ---------- DARK MODE (solo sobrescribe alias semánticos) ---------- */
[data-theme="dark"] {
  --color-bg-app:            var(--p-neutral-950);
  --color-bg-surface:        var(--p-neutral-900);
  --color-bg-surface-subtle: var(--p-neutral-800);
  --color-text-primary:      var(--p-neutral-0);
  --color-text-secondary:    var(--p-neutral-400);
  --color-border-default:    var(--p-neutral-800);
  --color-action-primary:    var(--p-violet-400);
}