/* ============================================================
   DESIGN SYSTEM — TOKENS
   Inspirado en Squarespace Forma (enterprise / servicios tech)
   Versión 2.0 · 2026
   ============================================================ */

/* ─── PALETA BASE (Forma: charcoal, warm neutrals, navy) ─── */
:root {
  --color-neutral-0:   #ffffff;
  --color-neutral-50:  #f7f6f3;
  --color-neutral-100: #efede8;
  --color-neutral-200: #e2dfd8;
  --color-neutral-300: #cfcbc2;
  --color-neutral-400: #a8a399;
  --color-neutral-500: #7a756c;
  --color-neutral-600: #5c5850;
  --color-neutral-700: #3d3a35;
  --color-neutral-800: #252320;
  --color-neutral-900: #141312;

  /* Accent — navy profundo (confianza / enterprise) */
  --color-accent-50:   #eef1f6;
  --color-accent-100:  #d4dce8;
  --color-accent-200:  #a8b8d0;
  --color-accent-400:  #4a6282;
  --color-accent-600:  #1b2a4a;
  --color-accent-800:  #0f1a2e;

  /* Success */
  --color-success-50:  #f0f7f2;
  --color-success-100: #d9ece0;
  --color-success-400: #5a9e72;
  --color-success-600: #2d6a4a;
  --color-success-800: #1b4332;

  /* Danger */
  --color-danger-50:   #fdf3f2;
  --color-danger-100:  #f5d8d5;
  --color-danger-400:  #c96a62;
  --color-danger-600:  #9b3d36;
  --color-danger-800:  #5c2420;

  /* Warning */
  --color-warning-50:  #faf6ef;
  --color-warning-100: #f0e4c8;
  --color-warning-400:  #c9a24d;
  --color-warning-600:  #8a6b1e;
  --color-warning-800:  #4a3a10;

  /* Pro / IA */
  --color-pro-50:   #f4f2f8;
  --color-pro-100:  #e4dff0;
  --color-pro-400:  #8b7cb8;
  --color-pro-600:  #5c4d8a;
  --color-pro-800:  #352e52;
}

/* ─── TOKENS SEMÁNTICOS — LIGHT (Forma default) ─── */
:root {
  --surface-page:    var(--color-neutral-50);
  --surface-0:       var(--color-neutral-100);
  --surface-1:       var(--color-neutral-50);
  --surface-2:       var(--color-neutral-0);
  --surface-popover: var(--color-neutral-0);
  --surface-inverse: var(--color-neutral-900);

  --text-primary:    var(--color-neutral-900);
  --text-secondary:  var(--color-neutral-700);
  --text-muted:      var(--color-neutral-600);
  --text-disabled:   var(--color-neutral-400);
  --text-accent:     var(--color-accent-600);
  --text-success:    var(--color-success-600);
  --text-danger:     var(--color-danger-600);
  --text-warning:    var(--color-warning-600);
  --text-pro:        var(--color-pro-600);
  --text-on-fill:    var(--color-neutral-0);
  --text-on-inverse: var(--color-neutral-50);

  --border:          var(--color-neutral-300);
  --border-strong:   var(--color-neutral-400);
  --border-stronger: var(--color-neutral-400);
  --border-accent:   var(--color-accent-400);
  --border-danger:   var(--color-danger-400);
  --border-success:  var(--color-success-400);

  --bg-accent:   var(--color-accent-50);
  --bg-success:  var(--color-success-50);
  --bg-danger:   var(--color-danger-50);
  --bg-warning:  var(--color-warning-50);
  --bg-pro:      var(--color-pro-50);

  --fill-primary:       var(--color-neutral-900);
  --fill-primary-hover: var(--color-neutral-800);
  --fill-accent:        var(--color-accent-600);
  --fill-accent-hover:  var(--color-accent-800);
  --fill-danger:        var(--color-danger-600);
  --fill-success:       var(--color-success-600);
}

/* ─── DARK MODE ─── */
[data-theme="dark"] {
  --surface-page:    #0e0e0d;
  --surface-0:       #181715;
  --surface-1:       #1e1d1a;
  --surface-2:       #252320;
  --surface-popover: #2c2a26;
  --surface-inverse: var(--color-neutral-50);

  --text-primary:    #f0ede6;
  --text-secondary:  #a8a399;
  --text-muted:      #7a756c;
  --text-disabled:   #5c5850;
  --text-accent:     var(--color-accent-200);
  --text-success:    var(--color-success-400);
  --text-danger:     var(--color-danger-400);
  --text-warning:    var(--color-warning-400);
  --text-pro:        var(--color-pro-400);
  --text-on-fill:    #ffffff;
  --text-on-inverse: var(--color-neutral-900);

  --border:          rgba(255,255,255,0.08);
  --border-strong:   rgba(255,255,255,0.14);
  --border-stronger: rgba(255,255,255,0.22);
  --border-accent:   var(--color-accent-400);
  --border-danger:   var(--color-danger-400);
  --border-success:  var(--color-success-400);

  --bg-accent:   rgba(27,42,74,0.22);
  --bg-success:  rgba(45,106,74,0.18);
  --bg-danger:   rgba(155,61,54,0.18);
  --bg-warning:  rgba(138,107,30,0.18);
  --bg-pro:      rgba(92,77,138,0.18);

  --fill-primary:       #f0ede6;
  --fill-primary-hover: #ffffff;
  --fill-accent:        var(--color-accent-600);
  --fill-accent-hover:  var(--color-accent-400);
  --fill-danger:        var(--color-danger-600);
  --fill-success:       var(--color-success-600);
}

/* ─── ESPACIADO (Forma: generoso) ─── */
:root {
  --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-20: 80px;
  --space-24: 96px;
}

/* ─── TIPOGRAFÍA (backoffice: sans profesional / informático) ─── */
:root {
  --font-display: 'IBM Plex Sans', 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-sans:    'IBM Plex Sans', 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:    'IBM Plex Mono', 'JetBrains Mono', 'Fira Code', monospace;

  --text-2xs: 11px;
  --text-xs:  12px;
  --text-sm:  14px;
  --text-md:  15px;
  --text-lg:  18px;
  --text-xl:  22px;
  --text-2xl: 28px;
  --text-3xl: 36px;

  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semibold: 600;

  --leading-tight:   1.25;
  --leading-normal:  1.5;
  --leading-relaxed: 1.65;

  --tracking-tight:  -0.015em;
  --tracking-normal: 0em;
  --tracking-wide:   0.04em;
  --tracking-wider:  0.08em;
}

/* ─── RADIOS (Forma: suaves, no pill-heavy) ─── */
:root {
  --radius-sm:   3px;
  --radius-md:   6px;
  --radius-lg:   10px;
  --radius-xl:   14px;
  --radius-full: 9999px;
}

/* ─── SOMBRAS (Forma: sutiles, editoriales) ─── */
:root {
  --shadow-xs: 0 1px 2px rgba(20,19,18,0.04);
  --shadow-sm: 0 2px 8px rgba(20,19,18,0.06);
  --shadow-md: 0 8px 24px rgba(20,19,18,0.08);
  --shadow-lg: 0 16px 48px rgba(20,19,18,0.10);
  --shadow-popover: 0 20px 60px rgba(20,19,18,0.14);
  --shadow-focus: 0 0 0 3px rgba(27,42,74,0.22);
  --shadow-focus-danger: 0 0 0 3px rgba(155,61,54,0.22);
}

[data-theme="dark"] {
  --shadow-xs: 0 1px 2px rgba(0,0,0,0.30);
  --shadow-sm: 0 2px 8px rgba(0,0,0,0.35);
  --shadow-md: 0 8px 24px rgba(0,0,0,0.40);
  --shadow-lg: 0 16px 48px rgba(0,0,0,0.50);
  --shadow-popover: 0 20px 60px rgba(0,0,0,0.55);
}

/* ─── MOTION ─── */
:root {
  --duration-instant: 50ms;
  --duration-fast:    120ms;
  --duration-normal:  240ms;
  --duration-slow:    400ms;
  --duration-slower:  600ms;

  --ease-default: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in:      cubic-bezier(0.4, 0, 1, 1);
  --ease-out:     cubic-bezier(0, 0, 0.2, 1);
  --ease-spring:  cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-linear:  linear;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-instant: 0ms;
    --duration-fast:    0ms;
    --duration-normal:  0ms;
    --duration-slow:    0ms;
    --duration-slower:  0ms;
  }
}

/* ─── Z-INDEX ─── */
:root {
  --z-below:    -1;
  --z-base:      0;
  --z-raised:    10;
  --z-dropdown:  100;
  --z-sticky:    200;
  --z-overlay:   300;
  --z-modal:     400;
  --z-toast:     500;
  --z-tooltip:   600;
}

/* ─── LAYOUT ─── */
:root {
  --sidebar-width:           220px;
  --sidebar-collapsed-width: 56px;
  --header-height:           64px;
  --content-max-width:       1200px;
  --content-padding:         var(--space-8);
  --auth-aside-width:        min(480px, 42vw);
}