:root {
    /* ─── Superficie ────────────────────────────────────────────────────────── */
    --surface-0:          #060d1a;
    --surface-1:          #0a1628;
    --surface-2:          #0d1b2e;
    --surface-3:          #111f36;
    --surface-glass-2:    rgba(13, 27, 46, 0.85);
    --surface-glass-3:    rgba(17, 31, 54, 0.90);

    /* ─── Bordes ────────────────────────────────────────────────────────────── */
    --border-subtle:      #131f33;
    --border-default:     #1e293b;
    --border-strong:      #334155;
    --border-focus:       #38bdf8;

    /* ─── Texto ─────────────────────────────────────────────────────────────── */
    --shell-ink:          #f1f5f9;
    --shell-muted:        #94a3b8;

    /* ─── Marca ─────────────────────────────────────────────────────────────── */
    --brand:              #3b9eff;
    --brand-hover:        #60b4ff;
    --brand-soft:         rgba(59, 158, 255, 0.12);
    --sidebar-active-bg:  rgba(59, 158, 255, 0.10);

    /* ─── Estados semánticos ─────────────────────────────────────────────────── */
    --ok:                 #4ade80;
    --ok-soft:            rgba(74, 222, 128, 0.10);
    --danger:             #fb7185;
    --danger-soft:        rgba(251, 113, 133, 0.10);
    --warning:            #fbbf24;
    --warning-soft:       rgba(251, 191, 36, 0.10);
    --info:               #38bdf8;
    --info-soft:          rgba(56, 189, 248, 0.10);

    /* ─── Fondos de estado (para badges, banners, chips) ────────────────────── */
    --status-ok-bg:       rgba(74, 222, 128, 0.08);
    --status-ok-border:   rgba(74, 222, 128, 0.25);
    --status-err-bg:      rgba(251, 113, 133, 0.08);
    --status-err-border:  rgba(251, 113, 133, 0.25);
    --status-warn-bg:     rgba(251, 191, 36, 0.08);
    --status-warn-border: rgba(251, 191, 36, 0.25);
    --status-info-bg:     rgba(56, 189, 248, 0.08);
    --status-info-border: rgba(56, 189, 248, 0.20);

    /* ─── Tipografía ─────────────────────────────────────────────────────────── */
    --text-xs:            11px;
    --text-sm:            13px;
    --text-base:          14px;
    --text-md:            16px;
    --text-lg:            18px;
    --text-xl:            20px;
    --text-2xl:           24px;
    --text-3xl:           clamp(22px, 3vw, 30px);
    --text-4xl:           clamp(28px, 4vw, 40px);
    --text-hero:          clamp(36px, 6vw, 64px);

    --font-weight-normal:   400;
    --font-weight-medium:   500;
    --font-weight-semibold: 600;
    --font-weight-bold:     700;

    --leading-tight:      1.15;
    --leading-snug:       1.3;
    --leading-normal:     1.5;
    --leading-relaxed:    1.65;

    --tracking-tight:     -0.02em;
    --tracking-normal:    0;
    --tracking-wide:      0.05em;
    --tracking-wider:     0.08em;

    /* ─── Espaciado (base-4) ─────────────────────────────────────────────────── */
    --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;

    /* ─── Anchos máximos ─────────────────────────────────────────────────────── */
    --max-w-narrow:       960px;
    --max-w-form:         640px;
    --page-gutter:        16px;

    /* ─── Radio de borde ─────────────────────────────────────────────────────── */
    --radius-sm:          6px;
    --radius-md:          8px;
    --radius-lg:          10px;
    --radius-xl:          14px;
    --radius-2xl:         18px;
    --radius-full:        999px;

    /* ─── Sombras ────────────────────────────────────────────────────────────── */
    --shadow-sm:          0 2px 8px rgba(0, 0, 0, 0.20);
    --shadow-md:          0 12px 28px rgba(0, 0, 0, 0.25);
    --shadow-lg:          0 18px 36px rgba(0, 0, 0, 0.30);
    --shadow-xl:          0 20px 40px rgba(0, 0, 0, 0.50);

    /* ─── Movimiento ─────────────────────────────────────────────────────────── */
    --duration-fast:      100ms;
    --duration-base:      160ms;
    --duration-slow:      280ms;
    --ease-default:       cubic-bezier(0.4, 0, 0.2, 1);
    --ease-spring:        cubic-bezier(0.34, 1.56, 0.64, 1);

    /* ─── Aliases de compatibilidad (deprecados — usar tokens nuevos) ────────── */
    --shell-bg:           var(--surface-0);
    --panel-bg:           var(--surface-2);
    --panel-border:       var(--border-default);
    --panel-border-strong:var(--border-strong);
    --focus-ring:         var(--border-focus);
    --input-bg:           var(--surface-1);
    --table-header-bg:    var(--surface-1);
  }

  * {
    box-sizing: border-box;
  }

  body {
    margin: 0;
    min-height: 100vh;
    font-family: "Inter", ui-sans-serif, system-ui, sans-serif;
    color: var(--shell-ink);
    background: linear-gradient(170deg, #06101f 0%, #080f1e 45%, #060d1a 100%);
  }

  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
    }
  }