/* ═════════════════════════════════════════════════════════════════════
   LYNX BOUTIQUE · DESIGN SYSTEM v2.0.0
   Fuente única de tokens para TODA la web (pública + admin)
   ═════════════════════════════════════════════════════════════════════

   ARQUITECTURA DE TOKENS (3 capas · destilada de Polaris/Carbon/M3):
   1. PRIMITIVE  → paleta cruda (escalas 10..90) · NO consumir directo en pages
   2. SEMANTIC   → tokens con INTENCIÓN (--color-bg-surface, --color-text-primary)
                   Esta es la capa pública que consumen pages y componentes
   3. COMPONENT  → tokens por componente (--btn-primary-bg) para overrides puntuales

   REGLAS:
   1. NO hardcodear colores · spacing · sombras · radios en pages
   2. SIEMPRE usar var(--token) semantic · si falta · agregarlo aquí primero
   3. Si una page necesita un componente custom · primero proponerlo aquí
   4. Alias legacy MANTENIDOS para no romper código actual (deprecación gradual)

   IMPORTADO POR:
   - src/layouts/AppPro.astro (admin · density compact)
   - src/layouts/Tienda.astro (pública · density comfortable)
   - src/layouts/Cerebro.astro

   DARK MODE: estructura lista en bloque `:root[data-theme="dark"]` (comentado).
   ═════════════════════════════════════════════════════════════════════ */

:root {
  /* DS meta · útil para tracking runtime + debug */
  --ds-version: '2.0.0';
  --ds-name: 'lynx-boutique';

  /* ╔══════════════════════════════════════════════════════════════════
     ║ CAPA 1 · PRIMITIVE TOKENS · paleta cruda · NO usar directo
     ╚══════════════════════════════════════════════════════════════════ */

  /* Champagne (brand · escala 10=más claro · 90=más oscuro) */
  --champagne-10: #fbf3e6;
  --champagne-20: #f4e4c8;
  --champagne-30: #e8c896;
  --champagne-40: #d4a76a;   /* hover/glow */
  --champagne-50: #C69558;   /* dorado Lynx primario · BRAND */
  --champagne-60: #a87d44;   /* active/press */
  --champagne-70: #845f33;
  --champagne-80: #5c4123;
  --champagne-90: #3a2a17;

  /* Ink (neutrales oscuros) */
  --ink-05: #f8f6f0;
  --ink-10: #e5e1d4;
  --ink-20: #c9c3b1;
  --ink-30: #a8a294;
  --ink-40: #6b6557;
  --ink-50: #4a4540;
  --ink-60: #2a2722;
  --ink-70: #1a1814;
  --ink-80: #0c0b08;        /* texto principal · negro tinta */
  --ink-90: #000000;

  /* Pure surfaces */
  --paper-00: #ffffff;
  --paper-05: #faf8f3;       /* fondo base página · crudo */
  --paper-10: #f5f1e6;
  --paper-20: #f1ede2;

  /* Semánticos crudos */
  --green-50: #15803d;
  --green-30: #22c55e;
  --amber-50: #b45309;
  --amber-30: #f59e0b;
  --red-50:   #b91c1c;
  --red-30:   #ef4444;
  --blue-50:  #1e40af;
  --blue-30:  #3b82f6;

  /* Alphas reutilizables */
  --alpha-ink-06:  rgba(12, 11, 8, 0.06);
  --alpha-ink-08:  rgba(12, 11, 8, 0.08);
  --alpha-ink-12:  rgba(12, 11, 8, 0.12);
  --alpha-ink-16:  rgba(12, 11, 8, 0.16);
  --alpha-paper-12: rgba(255, 255, 255, 0.12);
  --alpha-paper-40: rgba(255, 255, 255, 0.40);
  --alpha-brand-08: rgba(198, 149, 88, 0.08);
  --alpha-brand-10: rgba(198, 149, 88, 0.10);
  --alpha-brand-18: rgba(198, 149, 88, 0.18);
  --alpha-brand-30: rgba(198, 149, 88, 0.30);

  /* ╔══════════════════════════════════════════════════════════════════
     ║ CAPA 2 · SEMANTIC TOKENS · esta es la capa PÚBLICA que consume todo
     ╚══════════════════════════════════════════════════════════════════ */

  /* ─── BRAND ─── */
  --color-brand:           var(--champagne-50);
  --color-brand-hi:        var(--champagne-40);
  --color-brand-lo:        var(--champagne-60);
  --color-brand-soft:      var(--alpha-brand-10);

  /* ─── TEXT (foreground) ─── */
  --color-text-primary:    var(--ink-80);
  --color-text-secondary:  var(--ink-60);
  --color-text-muted:      var(--ink-40);
  --color-text-subtle:     var(--ink-30);
  --color-text-disabled:   var(--ink-20);
  --color-text-link:       var(--champagne-60);
  --color-text-link-hover: var(--champagne-50);
  --color-text-inverse:    var(--paper-00);
  --color-text-on-brand:   var(--ink-80);       /* texto sobre fondo brand (champagne claro) */
  --color-text-on-fill:    var(--paper-00);     /* texto sobre fill oscuro/danger */

  /* ─── BACKGROUNDS (surfaces) ─── */
  --color-bg-surface:           var(--paper-05);   /* página base */
  --color-bg-surface-card:      var(--paper-00);   /* cards · modales */
  --color-bg-surface-sunken:    var(--paper-20);   /* inputs · zonas secundarias */
  --color-bg-surface-hover:     var(--paper-10);
  --color-bg-surface-active:    var(--paper-20);
  --color-bg-surface-disabled:  var(--ink-05);
  --color-bg-inverse:           var(--ink-80);     /* dark cards · CTAs heavy */
  --color-bg-inverse-elev:      var(--ink-70);     /* dark elevated · hero */

  /* Layers prominence (Carbon-style · útil para nesting) */
  --color-layer-01:        var(--paper-00);
  --color-layer-02:        var(--paper-05);
  --color-layer-03:        var(--paper-10);

  /* ─── FILLS (botones · pills · chips · distinto de surfaces) ─── */
  --color-fill-brand:           var(--champagne-50);
  --color-fill-brand-hover:     var(--champagne-40);
  --color-fill-brand-active:    var(--champagne-60);
  --color-fill-neutral:         var(--paper-20);
  --color-fill-neutral-hover:   var(--ink-10);
  --color-fill-critical:        var(--red-50);
  --color-fill-critical-hover:  #a01818;
  --color-fill-success:         var(--green-50);
  --color-fill-warn:            var(--amber-50);
  --color-fill-info:            var(--blue-50);

  /* ─── BORDERS ─── */
  --color-border:            var(--ink-10);
  --color-border-hover:      var(--ink-20);
  --color-border-strong:     var(--ink-30);
  --color-border-emphasis:   var(--champagne-50);
  --color-border-subtle:     var(--ink-05);
  --color-border-critical:   var(--red-30);
  --color-border-success:    var(--green-30);
  --color-border-warn:       var(--amber-30);
  --color-border-info:       var(--blue-30);
  --color-border-inverse:    var(--alpha-paper-12);  /* sobre dark surfaces */

  /* ─── INTERACTIVE (links · controls · selección) ─── */
  --color-interactive:           var(--champagne-50);
  --color-interactive-hover:     var(--champagne-40);
  --color-interactive-active:    var(--champagne-60);
  --color-disabled:              var(--ink-20);
  --color-disabled-bg:           var(--ink-05);

  /* ─── FOCUS RING (a11y · todos los inputs/botones) ─── */
  --color-focus:           var(--champagne-50);
  --color-focus-ring:      var(--alpha-brand-30);
  --ring-focus:            0 0 0 3px var(--color-focus-ring);
  --ring-focus-offset:     2px;

  /* ─── STATES (success/warn/danger/info bgs y text) ─── */
  --color-success:         var(--green-50);
  --color-success-bg:      rgba(34, 197, 94, 0.08);
  --color-success-border:  rgba(34, 197, 94, 0.30);
  --color-warn:            var(--amber-50);
  --color-warn-bg:         rgba(245, 158, 11, 0.08);
  --color-warn-border:     rgba(245, 158, 11, 0.30);
  --color-danger:          var(--red-50);
  --color-danger-bg:       rgba(239, 68, 68, 0.06);
  --color-danger-border:   rgba(239, 68, 68, 0.30);
  --color-info:            var(--blue-50);
  --color-info-bg:         rgba(59, 130, 246, 0.08);
  --color-info-border:     rgba(59, 130, 246, 0.30);

  /* ─── SELECTION ─── */
  --color-selection-bg:    var(--alpha-brand-30);
  --color-selection-text:  var(--ink-80);

  /* ─── BACKDROP (modal overlay) ─── */
  --color-backdrop:        rgba(12, 11, 8, 0.55);
  --color-backdrop-light:  rgba(12, 11, 8, 0.30);

  /* ─── ALIAS legacy (compatibilidad con código existente · NO romper) ─── */
  --color-ink:             var(--color-text-primary);
  --color-ink-2:           var(--ink-70);
  --color-ink-3:           var(--ink-50);
  --color-ink-muted:       var(--color-text-muted);
  --color-ink-subtle:      var(--color-text-subtle);

  --color-surface:         var(--color-bg-surface);
  --color-surface-card:    var(--color-bg-surface-card);
  --color-surface-sunken:  var(--color-bg-surface-sunken);
  --color-surface-dark:    var(--color-bg-inverse);
  --color-surface-elev:    var(--color-bg-inverse-elev);

  --color-border-hi:       var(--color-border-hover);
  --color-border-dark:     var(--color-border-inverse);

  --bg:                    var(--color-bg-surface);
  --bg-2:                  var(--color-bg-surface-sunken);
  --bg-elev:               var(--color-bg-inverse-elev);
  --card:                  var(--color-bg-surface-card);
  --txt:                   var(--color-text-primary);
  --muted:                 var(--color-text-muted);
  --border:                var(--color-border);
  --border-hi:             var(--color-border-hover);
  --accent:                var(--color-brand);
  --accent-2:              var(--color-brand-hi);
  --accent-bg:             var(--color-brand-soft);
  --accent-bg-hi:          var(--alpha-brand-18);
  --green:                 var(--color-success);

  /* ╔══════════════════════════════════════════════════════════════════
     ║ SPACING · grid base 4px · multiplicado por --s-unit (density)
     ╚══════════════════════════════════════════════════════════════════ */
  --s-unit:  1;   /* override en [data-density] para escalar todo el grid */

  --s-0:    0;
  --s-1:    calc(4px  * var(--s-unit));
  --s-2:    calc(8px  * var(--s-unit));
  --s-3:    calc(12px * var(--s-unit));
  --s-4:    calc(16px * var(--s-unit));
  --s-5:    calc(24px * var(--s-unit));
  --s-6:    calc(32px * var(--s-unit));
  --s-7:    calc(40px * var(--s-unit));
  --s-8:    calc(48px * var(--s-unit));
  --s-9:    calc(64px * var(--s-unit));
  --s-10:   calc(80px * var(--s-unit));
  --s-11:   calc(96px * var(--s-unit));
  --s-12:   calc(128px * var(--s-unit));

  /* ─── RADIUS ─── */
  --r-xs:   4px;
  --r-sm:   6px;
  --r-md:   10px;
  --r-lg:   14px;
  --r-xl:   20px;
  --r-2xl:  28px;
  --r-3xl:  40px;
  --r-pill: 999px;
  --r-circle: 50%;

  /* ─── SHADOWS · numéricas + semánticas ─── */
  --shadow-none:     none;
  --shadow-xs:       0 1px 1px var(--alpha-ink-06);
  --shadow-sm:       0 1px 2px var(--alpha-ink-06);
  --shadow-md:       0 4px 12px var(--alpha-ink-08);
  --shadow-lg:       0 8px 24px var(--alpha-ink-12);
  --shadow-xl:       0 16px 48px var(--alpha-ink-16);
  --shadow-2xl:      0 24px 64px var(--alpha-ink-16);
  --shadow-accent:   0 4px 16px var(--alpha-brand-18);
  --shadow-inner:    inset 0 1px 2px var(--alpha-ink-06);

  /* Semantic shadow aliases (Polaris-style) */
  --shadow-card:     var(--shadow-sm);
  --shadow-popover:  var(--shadow-lg);
  --shadow-modal:    var(--shadow-2xl);
  --shadow-drawer:   var(--shadow-xl);
  --shadow-toast:    var(--shadow-lg);

  /* ╔══════════════════════════════════════════════════════════════════
     ║ TYPOGRAPHY · families · sizes · weights · line-heights
     ╚══════════════════════════════════════════════════════════════════ */
  --font-display:  'Anton', 'Impact', 'Arial Black', sans-serif;
  --font-body:     'Inter', system-ui, -apple-system, sans-serif;
  --font-mono:     'JetBrains Mono', ui-monospace, monospace;

  /* Display (hero · cinemático) */
  --t-display-lg:  clamp(36px, 6vw, 64px);
  --t-display:     clamp(28px, 4vw, 40px);

  /* Headings semánticos */
  --font-size-heading-xl:  32px;
  --font-size-heading-lg:  24px;
  --font-size-heading-md:  20px;
  --font-size-heading-sm:  16px;

  /* Alias legacy headings (NO romper) */
  --t-h1:          28px;
  --t-h2:          22px;
  --t-h3:          18px;

  /* Body */
  --font-size-body-lg:  16px;
  --font-size-body:     14px;
  --font-size-body-sm:  13px;
  --font-size-caption:  12px;
  --font-size-micro:    11px;

  /* Alias legacy body (NO romper) */
  --t-body:        14px;
  --t-body-sm:     13px;
  --t-caption:     12px;
  --t-micro:       11px;

  --fw-regular:    400;
  --fw-medium:     500;
  --fw-semi:       600;
  --fw-bold:       700;
  --fw-black:      900;

  --lh-tight:      1.1;
  --lh-snug:       1.3;
  --lh-normal:     1.5;
  --lh-relaxed:    1.7;

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

  /* ╔══════════════════════════════════════════════════════════════════
     ║ Z-INDEX · jerarquía completa (más capas que v1)
     ╚══════════════════════════════════════════════════════════════════ */
  --z-base:           1;
  --z-dropdown:       50;
  --z-sticky:         100;
  --z-sticky-header:  150;
  --z-overlay:        500;
  --z-drawer:         800;
  --z-modal:          1000;
  --z-popover:        1100;
  --z-tooltip:        1200;
  --z-snackbar:       1500;
  --z-toast:          2000;
  --z-debug:          9999;

  /* ╔══════════════════════════════════════════════════════════════════
     ║ MOTION · durations + easings (Carbon-inspired · separados)
     ╚══════════════════════════════════════════════════════════════════ */
  --duration-fast-01:     70ms;
  --duration-fast-02:     110ms;
  --duration-moderate-01: 150ms;
  --duration-moderate-02: 240ms;
  --duration-slow-01:     400ms;
  --duration-slow-02:     700ms;

  --ease-standard:   cubic-bezier(0.4, 0, 0.2, 1);
  --ease-entrance:   cubic-bezier(0, 0, 0.2, 1);
  --ease-exit:       cubic-bezier(0.4, 0, 1, 1);
  --ease-expressive: cubic-bezier(0.34, 1.56, 0.64, 1);   /* overshoot · sutil */
  --ease-linear:     linear;

  /* Alias legacy transitions (NO romper) */
  --t-fast:    var(--duration-fast-02) var(--ease-standard);
  --t-base:    var(--duration-moderate-01) var(--ease-standard);
  --t-slow:    var(--duration-moderate-02) var(--ease-standard);

  /* ╔══════════════════════════════════════════════════════════════════
     ║ BREAKPOINTS · valores compartidos JS/CSS
     ╚══════════════════════════════════════════════════════════════════ */
  --bp-xs:   480px;
  --bp-sm:   640px;
  --bp-md:   768px;
  --bp-lg:   1024px;
  --bp-xl:   1280px;
  --bp-2xl:  1536px;

  /* ╔══════════════════════════════════════════════════════════════════
     ║ CONTAINERS · max-widths por sección
     ╚══════════════════════════════════════════════════════════════════ */
  --container-sm:    640px;
  --container-md:    768px;
  --container-lg:    1024px;
  --container-xl:    1280px;
  --container-2xl:   1440px;
  --container-prose: 65ch;     /* texto leíble largo (legales · blog) */
  --container-full:  100%;

  /* ╔══════════════════════════════════════════════════════════════════
     ║ CAPA 3 · COMPONENT TOKENS · overrides puntuales por componente
     ║ (Si necesitás cambiar un botón sin tocar la semantic layer)
     ╚══════════════════════════════════════════════════════════════════ */

  /* Button */
  --btn-padding-y:           var(--s-3);
  --btn-padding-x:           var(--s-5);
  --btn-padding-y-sm:        var(--s-2);
  --btn-padding-x-sm:        var(--s-3);
  --btn-padding-y-lg:        var(--s-4);
  --btn-padding-x-lg:        var(--s-6);
  --btn-radius:              var(--r-md);
  --btn-font-weight:         var(--fw-semi);
  --btn-primary-bg:          var(--color-fill-brand);
  --btn-primary-bg-hover:    var(--color-fill-brand-hover);
  --btn-primary-bg-active:   var(--color-fill-brand-active);
  --btn-primary-text:        var(--color-text-on-brand);

  /* Card */
  --card-bg:        var(--color-bg-surface-card);
  --card-border:    var(--color-border);
  --card-radius:    var(--r-lg);
  --card-padding:   var(--s-5);
  --card-shadow:    var(--shadow-card);

  /* Input */
  --input-bg:           var(--color-bg-surface-card);
  --input-border:       var(--color-border);
  --input-border-focus: var(--color-focus);
  --input-radius:       var(--r-md);
  --input-padding-y:    var(--s-3);
  --input-padding-x:    var(--s-4);
  --input-text:         var(--color-text-primary);

  /* Modal/Dialog */
  --modal-bg:        var(--color-bg-surface-card);
  --modal-radius:    var(--r-xl);
  --modal-padding:   var(--s-6);
  --modal-shadow:    var(--shadow-modal);
  --modal-max-width: 560px;

  /* Toast */
  --toast-bg:      var(--color-bg-inverse);
  --toast-text:    var(--color-text-inverse);
  --toast-radius:  var(--r-md);
  --toast-padding: var(--s-4);
  --toast-shadow:  var(--shadow-toast);

  /* Table */
  --table-row-padding-y: var(--s-3);
  --table-row-padding-x: var(--s-4);
  --table-border:        var(--color-border-subtle);
  --table-header-bg:     var(--color-bg-surface-sunken);
  --table-row-hover:     var(--color-bg-surface-hover);
}

/* ═════════════════════════════════════════════════════════════════════
   DENSITY MODES · switch global por contexto (admin=compact, public=comfortable)
   Aplicar como atributo en <html> o contenedor: <html data-density="compact">
   ═════════════════════════════════════════════════════════════════════ */
:root[data-density="compact"]     { --s-unit: 0.75; }
:root[data-density="comfortable"] { --s-unit: 1; }
:root[data-density="spacious"]    { --s-unit: 1.25; }

/* ═════════════════════════════════════════════════════════════════════
   DARK MODE · estructura lista (deshabilitado por defecto)
   Activar con <html data-theme="dark"> · invierte SEMANTIC layer
   PRIMITIVE se mantiene igual (paleta inmutable).
   ═════════════════════════════════════════════════════════════════════ */
/*
:root[data-theme="dark"] {
  --color-text-primary:    var(--ink-05);
  --color-text-secondary:  var(--ink-10);
  --color-text-muted:      var(--ink-20);
  --color-text-subtle:     var(--ink-30);
  --color-text-inverse:    var(--ink-80);

  --color-bg-surface:        var(--ink-80);
  --color-bg-surface-card:   var(--ink-70);
  --color-bg-surface-sunken: var(--ink-60);
  --color-bg-surface-hover:  var(--ink-60);
  --color-bg-inverse:        var(--paper-00);
  --color-bg-inverse-elev:   var(--paper-05);

  --color-layer-01:        var(--ink-70);
  --color-layer-02:        var(--ink-60);
  --color-layer-03:        var(--ink-50);

  --color-border:          var(--alpha-paper-12);
  --color-border-hover:    rgba(255, 255, 255, 0.20);
  --color-border-strong:   rgba(255, 255, 255, 0.30);
  --color-border-subtle:   rgba(255, 255, 255, 0.06);

  --color-backdrop:        rgba(0, 0, 0, 0.70);
}
*/

/* ═════════════════════════════════════════════════════════════════════
   REDUCED MOTION · neutraliza animaciones para a11y
   ═════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast-01:     0ms;
    --duration-fast-02:     0ms;
    --duration-moderate-01: 0ms;
    --duration-moderate-02: 0ms;
    --duration-slow-01:     0ms;
    --duration-slow-02:     0ms;
    --t-fast: 0ms;
    --t-base: 0ms;
    --t-slow: 0ms;
  }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ═════════════════════════════════════════════════════════════════════
   GLOBAL · selection · focus-visible
   ═════════════════════════════════════════════════════════════════════ */
::selection {
  background: var(--color-selection-bg);
  color: var(--color-selection-text);
}

:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: var(--ring-focus-offset);
}

/* ═════════════════════════════════════════════════════════════════════
   COMPONENTES BASE · clases reutilizables
   (Refactor v2: todas las clases ahora consumen tokens semantic/component)
   ═════════════════════════════════════════════════════════════════════ */

/* ─── ds-button ─── */
.ds-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  padding: var(--btn-padding-y) var(--btn-padding-x);
  border: 1px solid transparent;
  border-radius: var(--btn-radius);
  font-family: var(--font-body);
  font-size: var(--t-body);
  font-weight: var(--btn-font-weight);
  cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast);
  white-space: nowrap;
  text-decoration: none;
  line-height: 1;
}
.ds-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.ds-btn:focus-visible { box-shadow: var(--ring-focus); outline: none; }

.ds-btn-primary {
  background: var(--btn-primary-bg);
  color: var(--btn-primary-text);
  font-weight: var(--fw-bold);
}
.ds-btn-primary:hover:not(:disabled) { background: var(--btn-primary-bg-hover); transform: translateY(-1px); box-shadow: var(--shadow-accent); }
.ds-btn-primary:active { background: var(--btn-primary-bg-active); transform: translateY(0); }

.ds-btn-secondary {
  background: var(--color-fill-neutral);
  color: var(--color-text-primary);
  border-color: var(--color-border);
}
.ds-btn-secondary:hover:not(:disabled) { background: var(--color-fill-neutral-hover); }

.ds-btn-ghost {
  background: transparent;
  color: var(--color-text-muted);
  border-color: var(--color-border);
}
.ds-btn-ghost:hover:not(:disabled) { background: var(--color-bg-surface-sunken); color: var(--color-text-primary); }

.ds-btn-danger {
  background: var(--color-fill-critical);
  color: var(--color-text-on-fill);
}
.ds-btn-danger:hover:not(:disabled) { background: var(--color-fill-critical-hover); }

.ds-btn-display {
  font-family: var(--font-display);
  font-size: var(--t-h3);
  letter-spacing: var(--tracking-wide);
  padding: var(--s-4) var(--s-6);
}

.ds-btn-block { width: 100%; }
.ds-btn-sm    { padding: var(--btn-padding-y-sm) var(--btn-padding-x-sm); font-size: var(--t-caption); }
.ds-btn-lg    { padding: var(--btn-padding-y-lg) var(--btn-padding-x-lg); font-size: var(--t-h3); }

/* ─── ds-card ─── */
.ds-card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--card-radius);
  padding: var(--card-padding);
  box-shadow: var(--card-shadow);
}
.ds-card-elev   { box-shadow: var(--shadow-md); }
.ds-card-flat   { box-shadow: none; }
.ds-card-dark   { background: var(--color-bg-inverse); color: var(--color-text-inverse); border-color: var(--color-border-inverse); }
.ds-card-accent { border-left: 4px solid var(--color-brand); }

/* ─── ds-input ─── */
.ds-input {
  display: block;
  width: 100%;
  padding: var(--input-padding-y) var(--input-padding-x);
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  border-radius: var(--input-radius);
  font-family: var(--font-body);
  font-size: var(--t-body);
  color: var(--input-text);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.ds-input:focus {
  outline: none;
  border-color: var(--input-border-focus);
  box-shadow: var(--ring-focus);
}
.ds-input.is-error {
  border-color: var(--color-danger);
  background: var(--color-danger-bg);
}
.ds-input:disabled {
  background: var(--color-disabled-bg);
  color: var(--color-text-disabled);
  cursor: not-allowed;
}
.ds-input::placeholder { color: var(--color-text-subtle); }

.ds-input-dark {
  background: rgba(0, 0, 0, 0.3);
  border-color: var(--color-border-inverse);
  color: var(--color-text-inverse);
}
.ds-input-dark::placeholder { color: var(--alpha-paper-40); }

/* ─── ds-field (input + label + hint) ─── */
.ds-field { display: flex; flex-direction: column; gap: var(--s-2); margin-bottom: var(--s-4); }
.ds-field-label {
  font-size: var(--t-micro);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  font-weight: var(--fw-bold);
}
.ds-field-hint  { font-size: var(--t-micro); color: var(--color-text-subtle); }
.ds-field-error { font-size: var(--t-caption); color: var(--color-danger); }

/* ─── ds-badge ─── */
.ds-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px var(--s-2);
  border-radius: var(--r-xs);
  font-size: var(--t-micro);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  background: var(--color-bg-surface-sunken);
  color: var(--color-text-muted);
  border: 1px solid var(--color-border);
}
.ds-badge-brand   { background: var(--color-brand); color: var(--color-text-on-brand); border-color: var(--color-brand); }
.ds-badge-success { background: var(--color-success-bg); color: var(--color-success); border-color: var(--color-success-border); }
.ds-badge-warn    { background: var(--color-warn-bg); color: var(--color-warn); border-color: var(--color-warn-border); }
.ds-badge-danger  { background: var(--color-danger-bg); color: var(--color-danger); border-color: var(--color-danger-border); }
.ds-badge-info    { background: var(--color-info-bg); color: var(--color-info); border-color: var(--color-info-border); }

/* ─── ds-alert ─── */
.ds-alert {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  padding: var(--s-4);
  border-radius: var(--r-md);
  border: 1px solid;
  font-size: var(--t-body);
  line-height: var(--lh-normal);
}
.ds-alert-success { background: var(--color-success-bg); color: var(--color-success); border-color: var(--color-success-border); }
.ds-alert-warn    { background: var(--color-warn-bg); color: var(--color-warn); border-color: var(--color-warn-border); }
.ds-alert-danger  { background: var(--color-danger-bg); color: var(--color-danger); border-color: var(--color-danger-border); }
.ds-alert-info    { background: var(--color-info-bg); color: var(--color-info); border-color: var(--color-info-border); }

/* ─── ds-kpi ─── */
.ds-kpi {
  background: var(--color-bg-surface-card);
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-brand);
  border-radius: var(--r-md);
  padding: var(--s-4);
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
}
.ds-kpi-label {
  font-size: var(--t-micro);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  font-weight: var(--fw-bold);
}
.ds-kpi-value {
  font-family: var(--font-display);
  font-size: 28px;
  line-height: var(--lh-tight);
  color: var(--color-text-primary);
}
.ds-kpi-meta { font-size: var(--t-micro); color: var(--color-text-subtle); }

.ds-kpi-success { border-left-color: var(--color-success); }
.ds-kpi-warn    { border-left-color: var(--color-warn); }
.ds-kpi-danger  { border-left-color: var(--color-danger); }
.ds-kpi-info    { border-left-color: var(--color-info); }

.ds-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--s-3);
}

/* ─── ds-stack (vertical spacing helper) ─── */
.ds-stack-1 > * + * { margin-top: var(--s-1); }
.ds-stack-2 > * + * { margin-top: var(--s-2); }
.ds-stack-3 > * + * { margin-top: var(--s-3); }
.ds-stack-4 > * + * { margin-top: var(--s-4); }
.ds-stack-5 > * + * { margin-top: var(--s-5); }
.ds-stack-6 > * + * { margin-top: var(--s-6); }

/* ─── ds-row (horizontal flex) ─── */
.ds-row     { display: flex; align-items: center; gap: var(--s-3); }
.ds-row-2   { display: flex; gap: var(--s-2); }
.ds-row-end { display: flex; align-items: center; gap: var(--s-3); justify-content: flex-end; }

/* ─── ds-container (centered max-width wrapper) ─── */
.ds-container     { max-width: var(--container-xl); margin-inline: auto; padding-inline: var(--s-4); width: 100%; }
.ds-container-sm  { max-width: var(--container-sm); }
.ds-container-md  { max-width: var(--container-md); }
.ds-container-lg  { max-width: var(--container-lg); }
.ds-container-xl  { max-width: var(--container-xl); }
.ds-container-prose { max-width: var(--container-prose); }

/* ─── Tipografía utility ─── */
.ds-display { font-family: var(--font-display); font-size: var(--t-display); line-height: var(--lh-tight); }
.ds-h1      { font-size: var(--t-h1); font-weight: var(--fw-bold); line-height: var(--lh-snug); }
.ds-h2      { font-size: var(--t-h2); font-weight: var(--fw-bold); line-height: var(--lh-snug); }
.ds-h3      { font-size: var(--t-h3); font-weight: var(--fw-bold); line-height: var(--lh-snug); }
.ds-body    { font-size: var(--t-body); line-height: var(--lh-normal); }
.ds-caption { font-size: var(--t-caption); color: var(--color-text-muted); }
.ds-micro   { font-size: var(--t-micro); color: var(--color-text-subtle); text-transform: uppercase; letter-spacing: var(--tracking-wider); }
.ds-mono    { font-family: var(--font-mono); }
.ds-link    { color: var(--color-text-link); text-decoration: underline; text-underline-offset: 2px; }
.ds-link:hover { color: var(--color-text-link-hover); }