/* ============================================================================
   VECTRUM DESIGN SYSTEM — TOKENS  ·  v1
   Single source of truth. NEVER hardcode hex in components or pages.
   Always reference these variables:  color: var(--color-fonts-font100);

   Light values live in  :root, body.force-light
   Dark  values live in  body.dark / body[data-theme="dark"] (canónico: data-theme; .dark es alias legado)

   Paleta Vectrum (apta daltonismo / WCAG AA verificada):
     · Esmeralda #046A38  (accent, brand primary)
     · Carbón    #0E1518  (texto base, superficies dark)
     · Marfil    #F5EFE0  (fondo light)
     · Oro       #C9A961  (acento secundario, hover de primario)

   ── Arquitectura de 3 niveles (aditiva, 2026-07-11) ──────────────────────
   Nivel 1 · Reference  (--ref-*)     primitivos crudos, no cambian por tema
   Nivel 2 · Semantic   (--color-*)   alias con propósito, SÍ cambian por tema
   Nivel 3 · Component  (css de cada componente en components.css)
   Los tokens semánticos más usados del sistema ahora apuntan a un --ref-*
   (ver bloque de abajo); el resto de tokens semánticos existentes NO se
   tocó — esto es aditivo, no una migración forzada de todo el archivo.
   Ver brand/references/design-tokens.md para la lista completa documentada.
   ============================================================================ */

:root {
  /* ── Nivel 1 · Reference tokens — primitivos, no cambian por tema ──────── */
  --ref-color-emerald-500: #046A38; /* Esmeralda Vectrum, modo claro */
  --ref-color-emerald-400: #10B981; /* Esmeralda luminoso, modo oscuro */
  --ref-color-emerald-600: #024022; /* Esmeralda profundo, sombreados/sombras sobre Esmeralda base */
  --ref-color-gold-500:    #C9A961; /* Oro Vectrum, acento secundario */
  --ref-color-gold-400:    #D4B872; /* Oro luminoso, modo oscuro */
  /* Escalera Carbón del modo oscuro: canvas, panel, elevado. Una sola fuente de
     verdad para los tres roles. Los saltos son de 1.15:1 y 1.26:1, así que la
     elevación en dark nunca se lee por relleno y siempre necesita borde o sombra. */
  --ref-color-carbon-900:  #0E1518; /* canvas dark, y texto base en light */
  --ref-color-carbon-850:  #1A2327; /* panel sobre canvas */
  --ref-color-carbon-800:  #1F2A2F; /* elevado sobre panel */
  --ref-color-ivory-50:    #F5EFE0; /* Marfil Vectrum, fondo claro */
  /* Superficies neumórficas — derivadas de Marfil para deck.css.
     El kit heredado usaba grises azulados (#E9EFF9 etc.); estos son sus
     equivalentes cálidos, alineados con la paleta Vectrum. Ver brand/metaphor.md. */
  --ref-color-ivory-100:   #EAE4D5; /* Marfil un paso más oscuro — surcos hundidos (.dn) */
  --ref-color-ivory-30:    #F0EBDE; /* Entre Marfil y su versión clara — surcos finos (.grv) */

  /* Easing de marca — solo el cubic-bezier, sin prefijo 'all'
     (los --transition-* ya traen 'all 0.Xs'; este token permite componer
      transiciones parciales tipo 'background-color 0.2s var(--ease-brand)'). */
  --ease-brand: cubic-bezier(0.25, 0.46, 0.45, 0.94); /* @kind other */

  --ref-color-red-500: #FF2C55;     /* Red, modo claro */
  --ref-color-red-400: #FF375F;     /* Red, modo oscuro */
  --ref-color-neutral-900: var(--ref-color-carbon-900);
  --ref-color-neutral-50: #EEEEF0;  /* texto base, modo oscuro */
  --ref-color-surface-light: var(--ref-color-ivory-50);
  --ref-color-surface-dark: var(--ref-color-carbon-900);
  --ref-color-white: #FFFFFF;
  --ref-color-black: #000000;
}

:root, body.force-light {

  /* ── Font families ───────────────────────────────────────────────────── */
  /* Regla vigente (2026-07-12): Inter para todo excepto títulos/encabezados,
     en todos los productos por igual. Quicksand exclusivamente en el nivel
     de título (h1–h6). DM Sans queda solo como fallback de compatibilidad,
     ya no es la fuente por defecto de ningún producto. Ver
     brand/references/typography-guide.md para el historial completo. */
  --font-family-primary: 'Inter', 'DM Sans', -apple-system, sans-serif;
  --font-family-secondary: 'Quicksand', 'DM Sans', sans-serif;

  /* ── Responsive breakpoints (flujo Framer: Desktop/Tablet/Phone/PhoneSm) ─ */
  --bp-desktop: 1200px; /* @kind other */   /* ≥ 1200  Desktop  */
  --bp-tablet: 810px; /* @kind other */     /* ≤ 810   Tablet   */
  --bp-phone: 480px; /* @kind other */      /* ≤ 480   Phone    */
  --bp-phonesm: 360px; /* @kind other */    /* ≤ 360   Phone SM */

  /* ── Brand accent — alias que mantiene resolviendo a base.css y m3-layout ── */
  --color-brand-primary: var(--ref-color-emerald-500);

  /* ── Text colors — Carbón #0E1518 con opacidades ─────────────────────── */
  --color-fonts-font100: var(--ref-color-carbon-900);
  --color-fonts-font85: rgba(14, 21, 24, 0.85);
  --color-fonts-font50: rgba(14, 21, 24, 0.50);
  --color-fonts-font25: rgba(14, 21, 24, 0.25);
  --color-fonts-font10: rgba(14, 21, 24, 0.10);
  /* Legacy aliases used by base.css */
  --color-font-100: var(--color-fonts-font100);
  --color-font-85: var(--color-fonts-font85);
  --color-font-50: var(--color-fonts-font50);

  /* ── Container / surface colors — Marfil como fondo, blanco para paneles ── */
  --color-containers-body: var(--ref-color-ivory-50);
  --color-container-body: var(--color-containers-body);        /* legacy alias */
  --color-containers-white-container: #FFFFFF;
  --color-containers-white-container-0: rgba(255, 255, 255, 0.00);
  --color-containers-washed-gray: #FAF6EE;                     /* marfil más claro */
  --color-containers-light-selection: #FFFFFF;
  --color-containers-white-70: rgba(255, 255, 255, 0.70);
  --color-containers-white-glass-10: rgba(245, 239, 224, 0.60);
  --color-containers-blur-50: rgba(245, 239, 224, 0.45);
  --color-containers-blur-85: rgba(245, 239, 224, 0.85);
  --color-containers-blur-100: #EFE9DC;
  --color-containers-blur-101: rgba(245, 239, 224, 0.45);
  --color-containers-blur-50-menu-correccion: rgba(245, 239, 224, 0.45);
  --color-containers-modal-bg: rgba(14, 21, 24, 0.10);
  --color-containers-body-web: var(--ref-color-ivory-50);
  --color-containers-panel-web: #FFFFFF;

  /* ── Brand palette · Esmeralda Vectrum (canonical) ───────────────────── */
  --color-paleta-emerald: var(--ref-color-emerald-500);
  --color-paleta-emerald-85: rgba(4, 106, 56, 0.85);
  --color-paleta-emerald-25: rgba(4, 106, 56, 0.25);
  --color-paleta-emerald-10: rgba(4, 106, 56, 0.10);
  --color-paleta-emerald-5:  rgba(4, 106, 56, 0.05);   /* fondo sutil */

  /* ── Acento secundario · Oro Vectrum ─────────────────────────────────── */
  /* Regla Vectrum: el hover del botón primario pasa de Esmeralda → Oro,
     pero con texto Carbón (NO blanco) porque Oro+Blanco da 2.25:1 (FAIL AA). */
  --color-paleta-gold: var(--ref-color-gold-500);
  --color-paleta-gold-85: rgba(201, 169, 97, 0.85);
  --color-paleta-gold-25: rgba(201, 169, 97, 0.25);
  --color-paleta-gold-10: rgba(201, 169, 97, 0.10);
  --color-paleta-gold-5:  rgba(201, 169, 97, 0.05);

  /* ── Neutros Vectrum ─────────────────────────────────────────────────── */
  --color-paleta-carbon: var(--ref-color-carbon-900);
  --color-paleta-ivory: var(--ref-color-ivory-50);

  /* ── Palette · White ─────────────────────────────────────────────────── */
  --color-paleta-white: #FFFFFF;

  /* ── Palette · Red ───────────────────────────────────────────────────── */
  --color-paleta-red: var(--ref-color-red-500);
  --color-paleta-red-50: #FB92A8;
  --color-paleta-red-15: #F8DAE3;
  --color-paleta-red-5: #F9F4F7;

  /* ══ Paletas de acento heredadas · REDUCIDAS a Esmeralda y Oro ══════════
     Vectrum tiene dos acentos de marca — Esmeralda primario, Oro secundario —
     y Rojo reservado para estados negativos. Los nueve matices de abajo eran
     heredados y azul-dominantes (matices 199°–267°), ajenos a la paleta. Pero
     los consumen 466 lugares del repo, así que borrarlos dejaría 466
     referencias colgando: sobreviven como ALIAS, no como color propio.

       verdes y teales            → Esmeralda
       azules, violetas, magentas → Oro

     Rojo no recibe alias decorativos a propósito: un chip decorativo pintado de
     rojo leería como error, y en este sistema el estado no se comunica por
     tinte. Cuando exista la paleta de data-viz nativa y segura para
     discromatopsia, estos alias se reapuntan ahí y recuperan matices distintos.

     Mapeo de tintes:  -50 → -25   ·   -15 → -10   ·   -5 → -5
     ═══════════════════════════════════════════════════════════════════════ */

  /* Magentas y violetas → Oro */
  --color-paleta-pink:            var(--color-paleta-gold);
  --color-paleta-pink-50:         var(--color-paleta-gold-25);
  --color-paleta-pink-15:         var(--color-paleta-gold-10);
  --color-paleta-pink-5:          var(--color-paleta-gold-5);
  --color-paleta-violet:          var(--color-paleta-gold);
  --color-paleta-violet-50:       var(--color-paleta-gold-25);
  --color-paleta-violet-15:       var(--color-paleta-gold-10);
  --color-paleta-violet-5:        var(--color-paleta-gold-5);

  /* Azules → Oro */
  --color-paleta-ultramarine:     var(--color-paleta-gold);
  --color-paleta-ultramarine-50:  var(--color-paleta-gold-25);
  --color-paleta-ultramarine-15:  var(--color-paleta-gold-10);
  --color-paleta-ultramarine-5:   var(--color-paleta-gold-5);
  --color-paleta-sky-blue:        var(--color-paleta-gold);
  --color-paleta-sky-blue-50:     var(--color-paleta-gold-25);
  --color-paleta-sky-blue-15:     var(--color-paleta-gold-10);
  --color-paleta-sky-blue-5:      var(--color-paleta-gold-5);
  --color-paleta-baby-blue:       var(--color-paleta-gold);
  --color-paleta-baby-blue-50:    var(--color-paleta-gold-25);
  --color-paleta-baby-blue-15:    var(--color-paleta-gold-10);
  --color-paleta-baby-blue-5:     var(--color-paleta-gold-5);

  /* Teales y verdes → Esmeralda */
  --color-paleta-aquamarine:      var(--color-paleta-emerald);
  --color-paleta-aquamarine-50:   var(--color-paleta-emerald-25);
  --color-paleta-aquamarine-15:   var(--color-paleta-emerald-10);
  --color-paleta-aquamarine-5:    var(--color-paleta-emerald-5);
  --color-paleta-turquoise:       var(--color-paleta-emerald);
  --color-paleta-turquoise-50:    var(--color-paleta-emerald-25);
  --color-paleta-turquoise-15:    var(--color-paleta-emerald-10);
  --color-paleta-turquoise-5:     var(--color-paleta-emerald-5);
  --color-paleta-turqoise:        var(--color-paleta-turquoise);      /* typo histórico */
  --color-paleta-turqoise-50:     var(--color-paleta-turquoise-50);
  --color-paleta-turqoise-15:     var(--color-paleta-turquoise-15);
  --color-paleta-turqoise-5:      var(--color-paleta-turquoise-5);
  --color-paleta-forest-green:    var(--color-paleta-emerald);
  --color-paleta-forest-green-50: var(--color-paleta-emerald-25);
  --color-paleta-forest-green-15: var(--color-paleta-emerald-10);
  --color-paleta-forest-green-5:  var(--color-paleta-emerald-5);
  --color-paleta-grass-green:     var(--color-paleta-emerald);
  --color-paleta-grass-green-50:  var(--color-paleta-emerald-25);
  --color-paleta-grass-green-15:  var(--color-paleta-emerald-10);
  --color-paleta-grass-green-5:   var(--color-paleta-emerald-5);

  /* ── Presentations / Pitch Deck (Slides) ─────────────────────────────── */
  --color-pres-canvas: #FFFFFF;
  --color-pres-blue: var(--ref-color-emerald-500);
  --color-pres-blue-soft: #F2FAF5;            /* Soft Esmeralda Pill background */
  --color-pres-text-primary: var(--ref-color-carbon-900);
  --color-pres-text-body: var(--ref-color-carbon-900);
  --color-pres-outline: #EAEAEA;              /* Outline Box border         */

  /* ── Padding scale ───────────────────────────────────────────────────── */
  --padding-xxs: 3px;
  --padding-xs: 5px;
  --padding-sm: 8px;
  --padding-sm---base: 9px;
  --padding-base: 10px;
  --padding-md: 12px;
  --padding-lg: 15px;
  --padding-xl: 20px;

  /* ── Spacing scale (4px base grid) ───────────────────────────────────── */
  --space-1: 2px;
  --space-2: 4px;
  --space-3: 5px;
  --space-4: 7px;
  --space-5: 8px;
  --space-6: 10px;
  --space-7: 12px;
  --space-8: 15px;
  --space-9: 18px;
  --space-10: 20px;
  --space-11: 24px;
  --space-12: 52px;

  /* ── Gap scale ───────────────────────────────────────────────────────── */
  --gap-xxxs: 2px;
  --gap-xxs: 4px;
  --gap-xs: 5px;
  --gap-xs---sm: 8px;
  --gap-sm: 10px;
  --gap-md: 14px;
  --gap-lg: 18px;
  --gap-xl: 20px;
  --gap-xxl: 24px;
  --gap-xxxl: 40px;

  /* ── Border radius ───────────────────────────────────────────────────── */
  --radius-sm: 8px;
  --radius-sm-md: 12px;
  --radius-base: 20px;          /* cards & panels — design law: 20–24px      */
  --radius-md: 24px;            /* large containers                          */
  --radius-xl: 28px;
  --radius-xxl: 32px;
  --radius-pill: 100px;         /* buttons, inputs, badges — full pill        */

  /* ── Font sizes (UI base) ────────────────────────────────────────────── */
  --font-size-xxxs: 10px;
  --font-size-xxs: 12px;
  --font-size-sm: 14px;
  --font-size-md: 16px;
  --font-size-lg: 18px;
  --font-size-xl: 20px;
  --font-size-xxl: 24px;
  --font-size-xxxl: 32px;

  /* ── Typography scale — semantic (consumed by base.css hierarchies) ───── */
  /* UI hierarchy (Inter) */
  --font-size-ui-title: 45px;
  --font-size-ui-sub: 35px;
  --font-size-ui-body: 24px;
  /* Publications hierarchy (Inter) */
  --font-size-pub-head-pri: 132px;
  --font-size-pub-head-sec: 88px;
  --font-size-pub-sub-pri: 72px;
  --font-size-pub-sub-sec: 48px;
  --font-size-pub-body-pri: 32px;
  --font-size-pub-body-sec: 24px;
  --font-size-pub-num-1: 450px;
  --font-size-pub-num-2: 320px;
  --font-size-pub-num-3: 220px;
  /* Presentations hierarchy (Quicksand) */
  --font-size-pres-title: 56px;
  --font-size-pres-sub-1: 36px;
  --font-size-pres-sub-2: 29px;
  --font-size-pres-body-1: 24px;
  --font-size-pres-body-2: 20px;
  --font-size-pres-body-3: 14px;
  --font-size-pres-num-lg: 112px;
  --font-size-pres-num-sm: 72px;


  /* ── Component dimensions (Figma-sourced) ────────────────────────────── */
  --size-xxxs: 10px;
  --size-xxs: 12px;
  --size-xs: 14px;
  --size-sm: 18px;
  --size-base: 20px;
  --size-md: 24px;
  --size-md-lg: 26px;
  --size-lg: 20px;
  --size-toggles: 12px;
  --size-xs-buttons: 16px;
  --size-tags: 25px;
  --size-list-items: 30px;
  --size-routers: 30px;
  --size-tools: 35px;
  --size-sm-tools: 30px;
  --size-contenedor-tools: 40px;
  --size-sm-contenedor-tools: 35px;
  --size-md-contenedor-tools: 40px;
  --size-md-contenedor: 50px;
  --size-xxxs-conteiners: 8px;
  --size-w-50: 50px;
  --size-w-240: 240px;
  --size-sm-card-min: 220px;
  --size-sm-card-min-2: 380px;
  --size-big-cont-sm: 120px;
  --size-modal-base: 380px;
  --size-modal-m: 450px;
  --size-modal-responsive: 274px;
  --size-pop-up: 554px;
  --size-input-min-width: 540px;
  --size-input-max-width: 700px;
  --size-w-texto-usuario: 540px;
  --size-width-menús-mobile: 290px;
  --size-nueva-plantilla--max: 640px;
  --size-desplegable-forms---sm: 80px;
  --size-desplegables-base: 200px;
  --size-desplegables-detalle: 180px;
  --padding-collapsed-navbar-logo: 13px;
  --padding-deployed-navbar-logo: 14px;
  --padding-deployed-navbar-caret: 20px;
  --padding-text-area-top: 65px;
  --gap-gap-logo: 8px;

  /* ── Font weights ────────────────────────────────────────────────────── */
  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* ── Effects ─────────────────────────────────────────────────────────── */
  --shadow-glow-primary: 0 0 40px rgba(4, 106, 56, 0.18);
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.06);
  --shadow-ethereal: 0 12px 36px rgba(0, 0, 0, 0.03);   /* design law: soft   */
  --shadow-pill-white: 0 4px 20px rgba(0, 0, 0, 0.02);
  --backdrop-blur: blur(12px); /* @kind other */
  --transition-base: all 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94); /* @kind other */
  --icon-linewidth: 1.1px;
  --icon-linewiddth: var(--icon-linewidth); /* alias legado (typo histórico) — no usar en trabajo nuevo */
  --icon-linewidth-input: 1.5px; /* biblioteca estática de iconos dentro de un Input — más peso visual */

  /* ── Borders ─────────────────────────────────────────────────────────── */
  --color-border-subtle: rgba(0, 0, 0, 0.08);
  --border-subtle: var(--color-border-subtle);   /* legacy alias, same value */
  --color-border-default: rgba(0, 0, 0, 0.12);

  /* ── Z-index scale (capas semánticas, no cambia por tema) ─────────────── */
  --z-nav: 100; /* @kind other */
  --z-tooltip: 150; /* @kind other */
  --z-sidebar-backdrop: 190; /* @kind other */
  --z-sidebar: 200; /* @kind other */
  --z-dropdown: 300; /* @kind other */
  --z-modal: 400; /* @kind other */
  --z-cmdk: 450; /* @kind other */
  --z-toast: 500; /* @kind other */

  /* ── Opacity scale — capas de estado (hover/active/disabled) ──────────── */
  --opacity-hover: 0.06; /* @kind other */
  --opacity-active: 0.10; /* @kind other */
  --opacity-selected: 0.12; /* @kind other */
  --opacity-disabled: 0.40; /* @kind other */
  --opacity-border: 0.10; /* @kind other */

  /* ── Motion scale (además del --transition-base existente) ────────────── */
  --transition-fast: all 0.15s cubic-bezier(0.25, 0.46, 0.45, 0.94); /* @kind other */
  --transition-slow: all 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94); /* @kind other */

  /* ── Elevation scale — aditiva, para componentes nuevos (Dropdown, Alert, Modal) */
  --shadow-1: 0 1px 3px rgba(0, 0, 0, 0.05);
  --shadow-2: 0 4px 12px rgba(0, 0, 0, 0.06);
  --shadow-3: 0 10px 24px rgba(0, 0, 0, 0.08);
  --shadow-4: 0 20px 48px rgba(0, 0, 0, 0.10);

  /* ── Icon sizes — set nuevo y coherente (--icon-* legacy queda sin usar) */
  --icon-size-sm: 16px;
  --icon-size-md: 20px;
  --icon-size-lg: 24px;
}

/* ============================================================================
   DARK MODE — data-theme="dark" (canónico) / body.dark (alias legado)
   ============================================================================ */
body.dark, body[data-theme="dark"] {

  --color-brand-primary: var(--ref-color-emerald-400);

  /* Text */
  --color-fonts-font100: var(--ref-color-neutral-50);
  --color-fonts-font85: rgba(238, 238, 240, 0.85);
  --color-fonts-font50: rgba(238, 238, 240, 0.50);
  --color-fonts-font25: rgba(238, 238, 240, 0.25);
  --color-fonts-font10: rgba(238, 238, 240, 0.10);

  /* Containers — sobre Carbón #0E1518, paneles ligeramente elevados */
  --color-containers-body: var(--ref-color-carbon-900);
  --color-containers-white-container: var(--ref-color-carbon-850);
  --color-containers-white-container-0: rgba(26, 35, 39, 0.00);
  --color-containers-washed-gray: var(--ref-color-carbon-850);
  --color-containers-light-selection: var(--ref-color-carbon-800);
  --color-containers-white-70: rgba(14, 21, 24, 0.70);
  --color-containers-white-glass-10: rgba(26, 35, 39, 0.59);
  --color-containers-blur-50: rgba(31, 42, 47, 0.40);
  --color-containers-blur-85: rgba(31, 42, 47, 0.70);
  --color-containers-blur-100: var(--ref-color-carbon-800);
  --color-containers-blur-101: rgba(31, 42, 47, 0.40);
  --color-containers-blur-50-menu-correccion: rgba(31, 42, 47, 0.60);
  --color-containers-modal-bg: rgba(0, 0, 0, 0.40);
  --color-containers-body-web: var(--ref-color-carbon-900);
  --color-containers-panel-web: var(--ref-color-carbon-850);

  /* Brand palette · Esmeralda (canonical dark) */
  --color-paleta-emerald: var(--ref-color-emerald-400);
  --color-paleta-emerald-85: rgba(16, 185, 129, 0.85);
  --color-paleta-emerald-25: rgba(16, 185, 129, 0.40);
  --color-paleta-emerald-10: rgba(16, 185, 129, 0.10);
  --color-paleta-emerald-5:  rgba(16, 185, 129, 0.05);

  /* Acento secundario · Oro (más cálido en dark) */
  --color-paleta-gold: var(--ref-color-gold-400);
  --color-paleta-gold-85: rgba(212, 184, 114, 0.85);
  --color-paleta-gold-25: rgba(212, 184, 114, 0.25);
  --color-paleta-gold-10: rgba(212, 184, 114, 0.10);
  --color-paleta-gold-5:  rgba(212, 184, 114, 0.05);

  /* Red */
  --color-paleta-red: var(--ref-color-red-400);
  --color-paleta-red-50: #83213D;
  --color-paleta-red-15: #45162C;
  --color-paleta-red-5: #2C1125;

  /* ══ Paletas de acento heredadas · alias, igual que en light ════════════
     Mismo criterio del bloque :root. Acá importa además que en dark Esmeralda
     y Oro solo se separan 1.32:1, así que estos alias NO sirven para distinguir
     categorías en modo oscuro: la distinción va por etiqueta, forma o posición.
     ═══════════════════════════════════════════════════════════════════════ */

  /* Magentas y violetas → Oro */
  --color-paleta-pink:            var(--color-paleta-gold);
  --color-paleta-pink-50:         var(--color-paleta-gold-25);
  --color-paleta-pink-15:         var(--color-paleta-gold-10);
  --color-paleta-pink-5:          var(--color-paleta-gold-5);
  --color-paleta-violet:          var(--color-paleta-gold);
  --color-paleta-violet-50:       var(--color-paleta-gold-25);
  --color-paleta-violet-15:       var(--color-paleta-gold-10);
  --color-paleta-violet-5:        var(--color-paleta-gold-5);

  /* Azules → Oro */
  --color-paleta-ultramarine:     var(--color-paleta-gold);
  --color-paleta-ultramarine-50:  var(--color-paleta-gold-25);
  --color-paleta-ultramarine-15:  var(--color-paleta-gold-10);
  --color-paleta-ultramarine-5:   var(--color-paleta-gold-5);
  --color-paleta-sky-blue:        var(--color-paleta-gold);
  --color-paleta-sky-blue-50:     var(--color-paleta-gold-25);
  --color-paleta-sky-blue-15:     var(--color-paleta-gold-10);
  --color-paleta-sky-blue-5:      var(--color-paleta-gold-5);
  --color-paleta-baby-blue:       var(--color-paleta-gold);
  --color-paleta-baby-blue-50:    var(--color-paleta-gold-25);
  --color-paleta-baby-blue-15:    var(--color-paleta-gold-10);
  --color-paleta-baby-blue-5:     var(--color-paleta-gold-5);

  /* Teales y verdes → Esmeralda */
  --color-paleta-aquamarine:      var(--color-paleta-emerald);
  --color-paleta-aquamarine-50:   var(--color-paleta-emerald-25);
  --color-paleta-aquamarine-15:   var(--color-paleta-emerald-10);
  --color-paleta-aquamarine-5:    var(--color-paleta-emerald-5);
  --color-paleta-turquoise:       var(--color-paleta-emerald);
  --color-paleta-turquoise-50:    var(--color-paleta-emerald-25);
  --color-paleta-turquoise-15:    var(--color-paleta-emerald-10);
  --color-paleta-turquoise-5:     var(--color-paleta-emerald-5);
  --color-paleta-forest-green:    var(--color-paleta-emerald);
  --color-paleta-forest-green-50: var(--color-paleta-emerald-25);
  --color-paleta-forest-green-15: var(--color-paleta-emerald-10);
  --color-paleta-forest-green-5:  var(--color-paleta-emerald-5);
  --color-paleta-grass-green:     var(--color-paleta-emerald);
  --color-paleta-grass-green-50:  var(--color-paleta-emerald-25);
  --color-paleta-grass-green-15:  var(--color-paleta-emerald-10);
  --color-paleta-grass-green-5:   var(--color-paleta-emerald-5);

  /* Presentations — este bloque NO sobreescribe los --color-pres-* a propósito.
     "Las presentaciones son siempre light" es regla de marca, y una regla que
     depende de que nadie active body.dark no es una regla: es un comentario.
     Sin override acá, los --color-pres-* conservan sus valores light de :root
     incluso con dark puesto, y la regla pasa a ser estructural.
     El navy que vivía en este bloque (#0F1626) era heredado, no Vectrum:
     matiz 222° y 43% de saturación, contra 198° y 26% del Carbón. */

  /* Effects & borders */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
  --shadow-ethereal: 0 12px 36px rgba(0, 0, 0, 0.25);
  --shadow-pill-white: 0 4px 20px rgba(0, 0, 0, 0.25);
  --color-border-subtle: rgba(255, 255, 255, 0.08);
  --border-subtle: var(--color-border-subtle);   /* legacy alias, same value */
  --color-border-default: rgba(255, 255, 255, 0.12);

  /* Elevation scale (dark) */
  --shadow-1: 0 1px 3px rgba(0, 0, 0, 0.35);
  --shadow-2: 0 4px 12px rgba(0, 0, 0, 0.40);
  --shadow-3: 0 10px 24px rgba(0, 0, 0, 0.45);
  --shadow-4: 0 20px 48px rgba(0, 0, 0, 0.55);
}