orbital-ds 0.2.0 → 0.3.0

package/dist/themes/qratia.css

@@ -1,5 +1,3 @@
-@import url('https://fonts.googleapis.com/css2?family=Instrument+Sans:ital,wght@0,400..700;1,400..700&display=swap');
-
 /*
  * PALETA DEL TEMA — el ÚNICO fichero que se toca para cambiar los colores
  * de la app (el equivalente cromático de config/brand.ts). Claro (:root) y
@@ -13,6 +11,20 @@
 :root {
 	--radius: 0.625rem;
 
+	/* Tipografía: Instrument Sans (fuentes en qratia.fonts.css) */
+	--ds-font-sans: 'Instrument Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
+	--ds-font-mono: ui-monospace, 'SF Mono', Menlo, monospace;
+
+	/*
+	 * Dos sombras de tarjeta: reposo y realce al señalar, EN CAPAS y TINTADAS con
+	 * la tinta del tema (no negro): una capa tensa pegada a la pieza + una suave más
+	 * lejana, para que la tarjeta se despegue del lienzo de forma natural.
+	 */
+	--ds-shadow-card:
+		0 1px 2px oklch(0.186 0.048 269 / 0.08), 0 3px 10px oklch(0.186 0.048 269 / 0.07);
+	--ds-shadow-card-hover:
+		0 3px 6px oklch(0.186 0.048 269 / 0.1), 0 14px 32px oklch(0.186 0.048 269 / 0.14);
+
 	/*
    * TRES NIVELES DE SUPERFICIE, y cada uno se distingue del de debajo por su
    * propio color — no por el borde. El lienzo NO es blanco puro: si lo fuera no
@@ -233,15 +245,3 @@
    * propia tinta. */
 	--sidebar: oklch(0.135 0.032 268); /* centro oscuro: --sb-bg #060B1C */
 }
-
-/* Tipografía del tema. */
-@theme inline {
-  /*
-   * FAMILIA. Instrument Sans es la del ecosistema; el resto de la pila es el
-   * respaldo del sistema para el instante previo a que la fuente cargue.
-   */
-  --font-sans: 'Instrument Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
-
-  /* Cifras: la mono para tiempos, identificadores y números comparables. */
-  --font-mono: ui-monospace, 'SF Mono', Menlo, monospace;
-}

package/dist/themes/qratia.fonts.css

@@ -0,0 +1,2 @@
+/* Fuentes del tema qratia: Instrument Sans. Importar el PRIMERO del CSS de la app. */
+@import url('https://fonts.googleapis.com/css2?family=Instrument+Sans:ital,wght@0,400..700;1,400..700&display=swap');

package/dist/themes/qratia.scoped.css

@@ -0,0 +1,247 @@
+/*
+ * PALETA DEL TEMA — el ÚNICO fichero que se toca para cambiar los colores
+ * de la app (el equivalente cromático de config/brand.ts). Claro (:root) y
+ * oscuro (.dark), en OKLCH. Validado por `pnpm check:contraste`: una paleta
+ * nueva que rompa contraste WCAG hace fallar el verify.
+ *
+ * Qué es cada token y cómo se usa: ver los comentarios de cada bloque y
+ * DESIGN.md. Las utilidades de Tailwind se derivan en styles.css (@theme).
+ */
+
+:root[data-theme='qratia'] {
+	--radius: 0.625rem;
+
+	/* Tipografía: Instrument Sans (fuentes en qratia.fonts.css) */
+	--ds-font-sans: 'Instrument Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
+	--ds-font-mono: ui-monospace, 'SF Mono', Menlo, monospace;
+
+	/*
+	 * Dos sombras de tarjeta: reposo y realce al señalar, EN CAPAS y TINTADAS con
+	 * la tinta del tema (no negro): una capa tensa pegada a la pieza + una suave más
+	 * lejana, para que la tarjeta se despegue del lienzo de forma natural.
+	 */
+	--ds-shadow-card:
+		0 1px 2px oklch(0.186 0.048 269 / 0.08), 0 3px 10px oklch(0.186 0.048 269 / 0.07);
+	--ds-shadow-card-hover:
+		0 3px 6px oklch(0.186 0.048 269 / 0.1), 0 14px 32px oklch(0.186 0.048 269 / 0.14);
+
+	/*
+   * TRES NIVELES DE SUPERFICIE, y cada uno se distingue del de debajo por su
+   * propio color — no por el borde. El lienzo NO es blanco puro: si lo fuera no
+   * habría sitio por encima para dos niveles elevados, porque el blanco es el
+   * techo. De ahí que el orden sea lienzo gris claro -> tarjeta -> panel
+   * flotante, y no al revés.
+   */
+	--background: oklch(0.967 0.011 244); /* centro: --bg   #EEF5FB */
+	--foreground: oklch(
+		0.186 0.048 269
+	); /* centro: --text #0A1128, la tinta de marca */
+
+	--card: oklch(1 0 0); /* centro: --card #FFFFFF */
+	--card-foreground: oklch(0.186 0.048 269);
+
+	/*
+   * TERCER nivel, DENTRO de la tarjeta: citas, evidencias, el reproductor. Un
+   * paso más oscuro que `card` y uno más claro que `background` — el contenido
+   * anidado se distingue sin una línea nueva.
+   */
+	--inset: oklch(0.98 0.007 248); /* centro: --row #F5F9FD */
+	--inset-foreground: oklch(0.186 0.048 269);
+
+	/* Con la tarjeta en blanco puro —el techo— el panel flotante ya no puede
+   * elevarse más: se distingue hundiéndose un paso, no subiendo. */
+	--popover: oklch(0.982 0.008 246);
+	--popover-foreground: oklch(0.186 0.048 269);
+
+	/*
+   * IDENTIDAD. `primary` es la TINTA (#0A1128), no el cian: el color sólido de
+   * acción es la tinta de marca, y el cian actúa de acento sobre ella. Un botón
+   * cian sobre lienzo claro no alcanzaría el contraste de texto.
+   */
+	--primary: oklch(0.186 0.048 269); /* centro: --primary #0A1128 */
+	--primary-foreground: oklch(1 0 0);
+
+	--secondary: oklch(0.941 0.016 245); /* centro: --muted-bg #E3EDF6 */
+	--secondary-foreground: oklch(0.271 0.056 268);
+
+	--muted: oklch(0.941 0.016 245);
+	--muted-foreground: oklch(0.524 0.044 259); /* centro: --muted #5B6B84 */
+
+	/*
+   * El cian, como TINTE de superficie: estado activo, resalte, selección. Aquí no
+   * es texto, así que su luminosidad alta no es un problema — al contrario, es lo
+   * que lo hace legible como fondo.
+   */
+	--accent: oklch(0.941 0.03 220); /* cian rebajado a superficie */
+	--accent-foreground: oklch(0.441 0.088 230);
+
+	/*
+   * TEXTO acentuado y enlaces — DISTINTO del acento de superficie: el cian de
+   * marca (#00B4D8, L 0.711) NO alcanza 4.5:1 sobre blanco por mucho que se vea
+   * bien. Usar `--accent` en texto es el error que este par de tokens evita.
+   */
+	--link: oklch(0.534 0.107 231); /* centro: --link #00779F */
+	--link-hover: oklch(0.441 0.088 230); /* centro: --link-hover #005B7A */
+
+	/* Cian pleno de marca. Superficies, trazos y focos — NUNCA texto sobre claro. */
+	--brand: oklch(0.711 0.129 219); /* centro: --accent #00B4D8 */
+	--brand-bright: oklch(
+		0.844 0.146 209
+	); /* centro: --accent-bright #00E5FF */
+
+	--destructive: oklch(0.577 0.215 27); /* centro: --risk #DC2626 */
+	--destructive-foreground: oklch(1 0 0);
+
+	/*
+   * `border` separa superficies y `input` delimita un CONTROL. No es lo mismo:
+   * el límite de un campo de formulario es información y WCAG le exige 3:1.
+   */
+	--border: oklch(0.92 0.017 248); /* centro: --border #DCE6F0 */
+	--input: oklch(0.62 0.045 250);
+
+	/* El foco es un elemento de interfaz y WCAG le exige 3:1: el cian pleno no lo
+   * alcanza sobre el lienzo claro. Lleva por tanto el tono de enlace. */
+	--ring: oklch(0.534 0.107 231);
+
+	/*
+   * ESTADO del dominio de calidad. Cuatro niveles, cada uno con su color pleno
+   * —texto, trazo, icono— y su versión suave para fondo de etiqueta.
+   * `sin-dato` es un nivel propio a propósito: un indicador sin medir no es un
+   * cero, y el color tiene que decir lo mismo.
+   */
+	--danger: oklch(0.5 0.2 27);
+	--danger-soft: oklch(0.94 0.035 27);
+
+	--warning: oklch(0.52 0.12 65);
+	--warning-soft: oklch(0.94 0.05 75);
+
+	--success: oklch(0.5 0.13 152);
+	--success-soft: oklch(0.93 0.04 152);
+
+	--neutral: oklch(0.518 0.03 262);
+	--neutral-soft: oklch(0.935 0.014 246);
+
+	/* `info` NO valora: no dice si algo va bien o mal, dice de dónde sale. Lleva
+   * el azul de la familia del enlace, distinto de los tres tonos que sí juzgan
+   * (rojo, ámbar, verde) y del gris de «sin dato». */
+	--info: oklch(0.49 0.105 231);
+	--info-soft: oklch(0.94 0.03 231);
+
+	/*
+   * Series de gráficas — paleta VALIDADA (daltonismo, croma, separación), no
+   * elegida por gusto. El ORDEN es estable: la ranura 1 es siempre la misma
+   * serie; un filtro que cambie cuántas series hay no repinta las que quedan.
+   */
+	--chart-1: #2a78d6; /* azul */
+	--chart-2: #eb6834; /* naranja */
+	--chart-3: #1baf7a; /* verde agua */
+	--chart-4: #eda100; /* amarillo */
+	--chart-5: #e87ba4; /* magenta */
+
+	/*
+   * SUPERFICIE DE MARCA — la tinta, y la MISMA en los dos modos. Es la pieza
+   * que identifica al producto: quien llega desde el centro reconoce el mismo
+   * chrome. Por eso NO se redefine en `.dark`.
+   */
+	--sidebar: oklch(0.186 0.048 269); /* centro: --sb-bg #0A1128 */
+	--sidebar-foreground: oklch(0.919 0.022 246); /* centro: --sb-fg #D9E6F2 */
+	/* Destino activo: el propio cian de marca al 12% sobre el fondo de la barra —
+   * un sólido inventado pesa de más y deja de leerse como tinte. */
+	--sidebar-accent: color-mix(
+		in oklch,
+		var(--brand-bright) 12%,
+		var(--sidebar)
+	);
+	--sidebar-accent-foreground: oklch(
+		0.89 0.092 213
+	); /* centro: --sb-active-fg #8FEBFF */
+	--sidebar-primary: oklch(0.844 0.146 209);
+	--sidebar-primary-foreground: oklch(0.186 0.048 269);
+	--sidebar-border: oklch(0.919 0.022 246 / 12%); /* centro: --sb-border */
+	--sidebar-ring: oklch(0.711 0.129 219);
+}
+
+:root[data-theme='qratia'].dark {
+	/*
+   * Gris elevado, no negro. Un fondo casi negro con texto claro produce halación
+   * y en jornadas de revisión eso cansa. Conserva los tres niveles de superficie.
+   */
+	--background: oklch(
+		0.186 0.048 269
+	); /* centro oscuro: --bg = la tinta #0A1128 */
+	--foreground: oklch(0.952 0.013 252); /* centro: --text #E9F0F8 */
+
+	--card: oklch(0.229 0.054 267); /* centro: --card #111B36 */
+	--card-foreground: oklch(0.952 0.013 252);
+
+	/* Mismo tono, paso propio de la superficie oscura: un escalón MÁS OSCURO que
+   * `card`, porque aquí elevar es aclarar y el incrustado va hundido. */
+	--inset: oklch(0.205 0.05 268);
+	--inset-foreground: oklch(0.952 0.013 252);
+
+	--popover: oklch(0.262 0.052 267);
+	--popover-foreground: oklch(0.952 0.013 252);
+
+	/*
+   * En oscuro se INVIERTE el reparto: aquí la acción sólida es el CIAN sobre
+   * tinta, porque la tinta ya es el lienzo y un botón del color del fondo no
+   * sería un botón. Es la misma identidad leída al revés.
+   */
+	--primary: oklch(0.844 0.146 209); /* centro oscuro: --primary #00E5FF */
+	--primary-foreground: oklch(0.186 0.048 269);
+
+	--secondary: oklch(0.275 0.048 267);
+	--secondary-foreground: oklch(0.952 0.013 252);
+
+	--muted: oklch(0.262 0.048 267);
+	--muted-foreground: oklch(0.711 0.041 259); /* centro: --muted #93A3BC */
+
+	--accent: oklch(0.3 0.055 240);
+	--accent-foreground: oklch(0.89 0.092 213);
+
+	/* Sobre fondo oscuro el cian SÍ se lee: aquí enlace y acento convergen. */
+	--link: oklch(0.89 0.092 213); /* centro: --link #66EDFF */
+	--link-hover: oklch(0.93 0.07 210); /* centro: --link-hover #9BF3FF */
+
+	--brand: oklch(0.844 0.146 209);
+	--brand-bright: oklch(0.844 0.146 209);
+
+	/* Sobre un rojo claro, el texto legible es el oscuro (medido: el claro daba 2.77:1). */
+	--destructive: oklch(0.711 0.166 22); /* centro: --risk #F87171 */
+	--destructive-foreground: oklch(0.16 0.02 27);
+
+	/* Bordes con color sólido y no con alfa sobre el fondo: el alfa hace que el
+   * mismo token se vea distinto según la superficie de debajo. */
+	--border: oklch(0.32 0.045 266);
+	--input: oklch(0.5 0.05 262);
+	--ring: oklch(0.844 0.146 209);
+
+	--danger: oklch(0.7 0.17 27);
+	--danger-soft: oklch(0.28 0.07 27);
+
+	--warning: oklch(0.78 0.13 75);
+	--warning-soft: oklch(0.3 0.06 75);
+
+	--success: oklch(0.74 0.14 155);
+	--success-soft: oklch(0.28 0.06 155);
+
+	--neutral: oklch(0.7 0.03 260);
+	--neutral-soft: oklch(0.265 0.035 266);
+
+	--info: oklch(0.82 0.1 220);
+	--info-soft: oklch(0.28 0.055 230);
+
+	/* Los MISMOS tonos, con el paso que corresponde a la superficie oscura — no
+   * una inversión automática del modo claro. Validado aparte: pasa todas las
+   * comprobaciones, contraste incluido. */
+	--chart-1: #3987e5; /* azul */
+	--chart-2: #d95926; /* naranja */
+	--chart-3: #199e70; /* verde agua */
+	--chart-4: #c98500; /* amarillo */
+	--chart-5: #d55181; /* magenta */
+
+	/* La barra NO se redefine aquí (superficie de MARCA, la misma en los dos
+   * modos). Solo se hunde un paso respecto al lienzo, que en oscuro ya es la
+   * propia tinta. */
+	--sidebar: oklch(0.135 0.032 268); /* centro oscuro: --sb-bg #060B1C */
+}

package/dist/themes/zyro.css

@@ -1,57 +1,34 @@
 /*
- * TEMA zyro — «liquid glass» (traducido de faro-orbital-zyro-ui/global.css).
+ * TEMA zyro — «liquid glass» (traducido de faro-orbital-zyro-ui).
  *
- * Identidad: lienzo lavanda claro / azul muy oscuro, acento azul profundo
- * (claro) y cian (oscuro), cristal traslúcido con desenfoque y saturación, y
- * un fondo vivo. Cumple el MISMO contrato de tema que `qratia` (ver
- * `contract.json`): todo lo que cambia respecto a qratia es aspecto, no API.
+ * Personalidad: lavanda claro / azul muy oscuro, acento azul profundo (claro) y
+ * cian (oscuro). El cristal vive en la capa de NAVEGACIÓN y CONTROLES (sidebar,
+ * campos, menús); el CONTENIDO (tarjetas) se mantiene casi opaco, como indican
+ * las guías de cristal. Sidebar a ras de borde, sin silueta flotante. Acción
+ * primaria = píldora con degradado de marca y brillo.
  *
- * Importar DESPUÉS de la estructura (`orbital-ds/styles.css`), para que este
- * tema pueda sobrescribir también la escala de radios y las sombras:
+ * Estructura del fichero:
+ *   1. Variables claras (:root) y oscuras (.dark) — el CONTRATO del tema.
+ *   2. Capa de PERSONALIDAD — reglas sobre los ganchos del DOM (`data-slot`,
+ *      `data-variant`…) escritas solo con variables. Va SIN capa para ganar a las
+ *      utilidades de los componentes, así que define también los estados
+ *      (hover, active). Es lo que da forma propia a los elementos.
  *
- *   @import 'orbital-ds/styles.css';
- *   @import 'orbital-ds/themes/zyro.css';
- *
- * Valores derivados (no vienen tal cual de zyro-ui): danger, danger-soft,
- * neutral(-soft), link-hover, brand-bright y inset, que zyro no define con
- * esos nombres; y el texto sobre el primario en oscuro, que se oscurece para
- * alcanzar contraste AA.
- *
- * Tipografía: Montserrat (titulares) + Roboto (cuerpo). Cárgalas en la app
- * (<link> a Google Fonts o self-host).
+ * Variables `--zy-*`: privadas de este tema (no son contrato).
+ * Importar DESPUÉS de la estructura. Fuentes: `zyro.fonts.css`, lo primero del CSS.
  */
 
-@theme inline {
-  /* Tipografía */
-  --font-sans: 'Roboto', system-ui, -apple-system, sans-serif;
-  --font-display: 'Montserrat', system-ui, -apple-system, sans-serif;
-  --font-mono: ui-monospace, 'SF Mono', Menlo, monospace;
-
-  /* Escala de radios Zyro: el radio crece con el tamaño del contenedor. */
-  --radius-sm: 7px;
-  --radius-md: 10px;
-  --radius-lg: 14px;
-  --radius-xl: 18px;
-  --radius-2xl: 22px;
-  --radius-control: 10px;
-  --radius-overlay: 22px;
-
-  /* Sombras de cristal: capa tensa + difusa y brillo interior en el borde. */
-  --shadow-card: 0 2px 14px rgba(28, 48, 100, 0.07);
-  --shadow-card-hover:
-    0 4px 30px rgba(28, 48, 100, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.85);
-  --shadow-raised:
-    0 4px 30px rgba(28, 48, 100, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.85);
-  --shadow-overlay:
-    0 14px 52px rgba(28, 48, 100, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.95);
-  --shadow-popover:
-    0 14px 52px rgba(28, 48, 100, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.95);
-}
-
-/* ── PIEL CLARA ─────────────────────────────────────────────────────────── */
+/* ── 1. VARIABLES · PIEL CLARA ───────────────────────────────────────────── */
 :root {
   --radius: 18px;
 
+  /* Tipografía: Montserrat (titulares) + Roboto (cuerpo) */
+  --ds-font-sans: 'Roboto', system-ui, -apple-system, sans-serif;
+  --ds-font-display: 'Montserrat', system-ui, -apple-system, sans-serif;
+  --ds-font-mono: ui-monospace, 'SF Mono', Menlo, monospace;
+  --ds-heading-tracking: -0.01em;
+
+  /* Color */
   --background: #eaeefb;
   --foreground: rgba(14, 22, 48, 0.92);
 
@@ -81,16 +58,15 @@
   --chart-4: #eb1919;
   --chart-5: #9747ff;
 
-  --sidebar: rgba(255, 255, 255, 0.4);
-  --sidebar-foreground: rgba(14, 22, 48, 0.66);
+  --sidebar: rgba(255, 255, 255, 0.58);
+  --sidebar-foreground: rgba(14, 22, 48, 0.78);
   --sidebar-primary: #0349fe;
   --sidebar-primary-foreground: #ffffff;
   --sidebar-accent: rgba(3, 73, 254, 0.09);
   --sidebar-accent-foreground: #0349fe;
-  --sidebar-border: rgba(168, 190, 235, 0.3);
+  --sidebar-border: rgba(168, 190, 235, 0.35);
   --sidebar-ring: #0349fe;
 
-  /* Estados (variante oscura para texto sobre claro) */
   --danger: #c21414;
   --danger-soft: rgba(235, 25, 25, 0.1);
   --warning: #9a6e00;
@@ -109,19 +85,68 @@
   --brand: #0349fe;
   --brand-bright: #36b3ed;
 
-  /* Materiales: cristal. El fondo vivo (malla WebGL en zyro-ui) se aproxima
-     aquí con degradados; el componente de malla es opcional. */
+  /* Formas: la esquina crece con el tamaño del contenedor (7·10·14·18·22) */
+  --ds-radius-sm: 7px;
+  --ds-radius-md: 10px;
+  --ds-radius-lg: 14px;
+  --ds-radius-xl: 18px;
+  --ds-radius-2xl: 22px;
+  --ds-radius-control: 10px;
+  --ds-radius-overlay: 22px;
+
+  /* Sombras de cristal: capa tenue + brillo interior en el borde superior */
+  --ds-shadow-card: 0 2px 14px rgba(28, 48, 100, 0.07);
+  --ds-shadow-card-hover: 0 6px 26px rgba(28, 48, 100, 0.1);
+  --ds-shadow-raised: 0 4px 30px rgba(28, 48, 100, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.85);
+  --ds-shadow-overlay: 0 14px 52px rgba(28, 48, 100, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.95);
+  --ds-shadow-popover: 0 14px 52px rgba(28, 48, 100, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.95);
+
+  /* Medidas: controles algo más altos y holgados */
+  --ds-control-h-sm: 2.25rem;
+  --ds-control-h-md: 2.5rem;
+  --ds-control-h-lg: 2.75rem;
+  --ds-button-px-sm: 1rem;
+  --ds-button-px-md: 1.25rem;
+  --ds-button-px-lg: 1.5rem;
+  --ds-field-px: 1rem;
+
+  /* Materiales: cristal en navegación y controles; tarjetas sin desenfoque */
   --ds-sidebar-backdrop: blur(28px) saturate(180%);
   --ds-overlay-backdrop: blur(28px) saturate(180%);
   --ds-field-backdrop: blur(12px) saturate(160%);
   --ds-card-backdrop: none;
   --ds-page-backdrop:
-    radial-gradient(60% 50% at 12% 8%, rgba(54, 179, 237, 0.4), transparent 70%),
-    radial-gradient(55% 45% at 88% 18%, rgba(3, 73, 254, 0.24), transparent 70%),
-    radial-gradient(50% 55% at 55% 100%, rgba(151, 71, 255, 0.2), transparent 70%);
+    radial-gradient(55% 45% at 78% 6%, rgba(54, 179, 237, 0.3), transparent 70%),
+    radial-gradient(50% 45% at 96% 58%, rgba(3, 73, 254, 0.16), transparent 70%),
+    radial-gradient(55% 50% at 40% 106%, rgba(151, 71, 255, 0.14), transparent 70%);
+
+  /* Sidebar a ras de borde: sin separación, sin silueta; filo de 1px */
+  --ds-sidebar-pad: 0px;
+  --ds-sidebar-radius: 0px;
+  --ds-sidebar-shadow: 0 0 #0000;
+  --ds-sidebar-ring: 0px;
+  --ds-sidebar-edge: 1px solid var(--zy-glass-bs);
+  --ds-sidebar-item-radius: var(--ds-radius-lg);
+
+  /* Privadas de zyro */
+  --zy-accent-g: linear-gradient(135deg, #0349fe, #36b3ed);
+  --zy-accent-glow: rgba(3, 73, 254, 0.24);
+  --zy-glass-bt: rgba(255, 255, 255, 0.95);
+  --zy-glass-bs: rgba(168, 190, 235, 0.4);
+  --zy-card-bt: rgba(255, 255, 255, 1);
+  --zy-card-bs: rgba(168, 190, 235, 0.46);
+  --zy-field-bg: rgba(255, 255, 255, 0.72);
+  --zy-field-b: rgba(168, 190, 235, 0.55);
+  --zy-field-bt: rgba(255, 255, 255, 1);
+  --zy-pill: rgba(255, 255, 255, 0.55);
+  --zy-pill-on: rgba(255, 255, 255, 0.98);
+  --zy-conv-h: rgba(20, 40, 90, 0.04);
+  --zy-conv-a: rgba(3, 73, 254, 0.07);
+  --zy-conv-ab: rgba(3, 73, 254, 0.24);
+  --zy-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
 }
 
-/* ── PIEL OSCURA ────────────────────────────────────────────────────────── */
+/* ── 1b. VARIABLES · PIEL OSCURA ─────────────────────────────────────────── */
 .dark {
   --background: #0e3148;
   --foreground: rgba(255, 255, 255, 0.94);
@@ -153,7 +178,7 @@
   --chart-5: #9747ff;
 
   --sidebar: rgba(255, 255, 255, 0.04);
-  --sidebar-foreground: rgba(255, 255, 255, 0.68);
+  --sidebar-foreground: rgba(255, 255, 255, 0.72);
   --sidebar-primary: #36b3ed;
   --sidebar-primary-foreground: #04121c;
   --sidebar-accent: rgba(54, 179, 237, 0.16);
@@ -179,11 +204,140 @@
   --brand: #36b3ed;
   --brand-bright: #7fd0f5;
 
+  --ds-shadow-card: 0 2px 14px rgba(0, 0, 0, 0.3);
+  --ds-shadow-card-hover: 0 6px 26px rgba(0, 0, 0, 0.38);
+  --ds-shadow-raised: 0 8px 40px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.1);
+  --ds-shadow-overlay: 0 22px 64px rgba(0, 0, 0, 0.36), inset 0 1px 0 rgba(255, 255, 255, 0.13);
+  --ds-shadow-popover: 0 22px 64px rgba(0, 0, 0, 0.36), inset 0 1px 0 rgba(255, 255, 255, 0.13);
+
   --ds-sidebar-backdrop: blur(24px) saturate(180%);
   --ds-overlay-backdrop: blur(24px) saturate(180%);
-  --ds-field-backdrop: blur(12px) saturate(160%);
   --ds-page-backdrop:
-    radial-gradient(60% 50% at 12% 8%, rgba(54, 179, 237, 0.3), transparent 70%),
-    radial-gradient(55% 45% at 88% 18%, rgba(3, 73, 254, 0.28), transparent 70%),
-    radial-gradient(50% 55% at 55% 100%, rgba(151, 71, 255, 0.22), transparent 70%);
+    radial-gradient(55% 45% at 78% 6%, rgba(54, 179, 237, 0.26), transparent 70%),
+    radial-gradient(50% 45% at 96% 58%, rgba(3, 73, 254, 0.24), transparent 70%),
+    radial-gradient(55% 50% at 40% 106%, rgba(151, 71, 255, 0.2), transparent 70%);
+
+  --zy-accent-g: linear-gradient(135deg, #36b3ed, #0349fe);
+  --zy-accent-glow: rgba(54, 179, 237, 0.42);
+  --zy-glass-bt: rgba(255, 255, 255, 0.3);
+  --zy-glass-bs: rgba(255, 255, 255, 0.07);
+  --zy-card-bt: rgba(255, 255, 255, 0.11);
+  --zy-card-bs: rgba(255, 255, 255, 0.06);
+  --zy-field-bg: rgba(255, 255, 255, 0.06);
+  --zy-field-b: rgba(255, 255, 255, 0.12);
+  --zy-field-bt: rgba(255, 255, 255, 0.26);
+  --zy-pill: rgba(255, 255, 255, 0.05);
+  --zy-pill-on: rgba(255, 255, 255, 0.12);
+  --zy-conv-h: rgba(255, 255, 255, 0.05);
+  --zy-conv-a: rgba(54, 179, 237, 0.14);
+  --zy-conv-ab: rgba(54, 179, 237, 0.4);
+}
+
+/* ── 2. PERSONALIDAD ─────────────────────────────────────────────────────────
+ * Sin capa: gana a las utilidades de los componentes. Solo variables.
+ */
+:root {
+  /* Botones: píldora. Acción primaria con degradado de marca y brillo. */
+  [data-slot='button'] {
+    border-radius: 9999px;
+    transition: all var(--ds-motion-base) var(--zy-ease);
+  }
+  [data-slot='button'][data-size^='icon'] {
+    border-radius: var(--ds-radius-xl);
+  }
+  [data-slot='button']:active:not(:disabled) {
+    transform: scale(0.98);
+  }
+  [data-slot='button'][data-variant='default'] {
+    background-color: transparent;
+    background-image: var(--zy-accent-g);
+    color: #ffffff;
+    border-color: transparent;
+    box-shadow: 0 4px 16px var(--zy-accent-glow);
+  }
+  [data-slot='button'][data-variant='default']:hover:not(:disabled) {
+    filter: brightness(1.1);
+    box-shadow: 0 6px 22px var(--zy-accent-glow);
+  }
+  [data-slot='button'][data-variant='destructive'] {
+    box-shadow: 0 4px 16px rgba(235, 25, 25, 0.3);
+  }
+  [data-slot='button'][data-variant='outline'],
+  [data-slot='button'][data-variant='secondary'] {
+    border: 1px solid var(--zy-field-b);
+    background: color-mix(in oklch, var(--foreground) 5%, var(--background));
+    color: var(--muted-foreground);
+  }
+  [data-slot='button'][data-variant='outline']:hover:not(:disabled),
+  [data-slot='button'][data-variant='secondary']:hover:not(:disabled) {
+    background: color-mix(in oklch, var(--foreground) 11%, var(--background));
+    color: var(--foreground);
+  }
+  [data-slot='button'][data-variant='ghost']:hover:not(:disabled) {
+    background: var(--zy-conv-h);
+    color: var(--foreground);
+  }
+
+  /* Tarjetas: contenido casi opaco con filo superior luminoso */
+  [data-slot='card'] {
+    border: 1px solid var(--zy-card-bs);
+    border-top-color: var(--zy-card-bt);
+  }
+
+  /* Campos: cristal claro con filo superior */
+  [data-slot='input'],
+  [data-slot='textarea'],
+  [data-slot='select-trigger'] {
+    background-color: var(--zy-field-bg);
+    border-color: var(--zy-field-b);
+    border-top-color: var(--zy-field-bt);
+  }
+
+  /* Capas flotantes: filo de cristal */
+  [data-slot='dialog-content'],
+  [data-slot='popover-content'],
+  [data-slot='dropdown-menu-content'],
+  [data-slot='select-content'] {
+    border: 1px solid var(--zy-glass-bs);
+    border-top-color: var(--zy-glass-bt);
+  }
+
+  /* Etiquetas en píldora */
+  [data-slot='badge'] {
+    border-radius: 9999px;
+  }
+
+  /* Pestañas: píldora de cristal con la activa elevada */
+  [data-slot='tabs-list'] {
+    background: var(--zy-pill);
+    border: 1px solid var(--zy-card-bs);
+    border-radius: 9999px;
+  }
+  [data-slot='tabs-trigger'] {
+    border-radius: 9999px;
+  }
+  [data-slot='tabs-trigger'][data-active] {
+    background: var(--zy-pill-on);
+    box-shadow: 0 1px 6px rgba(28, 48, 100, 0.12);
+  }
+
+  /* Interruptor y progreso: degradado de marca */
+  [data-slot='switch'][data-checked] {
+    background-image: var(--zy-accent-g);
+    background-color: transparent;
+  }
+  [data-slot='progress-indicator'] {
+    background-image: var(--zy-accent-g);
+    background-color: transparent;
+  }
+
+  /* Sidebar: destino activo con tinte y filo, como la conversación activa de zyro */
+  [data-sidebar='menu-button'][data-active='true'] {
+    background: var(--zy-conv-a);
+    box-shadow: inset 0 0 0 1px var(--zy-conv-ab);
+    color: var(--sidebar-accent-foreground);
+  }
+  [data-sidebar='menu-button']:hover:not([data-active='true']) {
+    background: var(--zy-conv-h);
+  }
 }

package/dist/themes/zyro.fonts.css

@@ -0,0 +1,2 @@
+/* Fuentes del tema zyro: Montserrat (titulares) + Roboto (cuerpo). Importar el PRIMERO del CSS de la app. */
+@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@500;600;700;800&family=Roboto:wght@300;400;500;600;700&display=swap');