@higinio/design-mcp 0.1.0

package/assets/nocturna/tailwind.css

@@ -0,0 +1,115 @@
+/* ============================================================
+   Nocturna Eléctrica — Tailwind CSS v4 (@theme)
+   Sistema de diseño de Higinio Sosa · dark-first
+   Uso:  @import "tailwindcss";  y luego este archivo,
+   o copiar este contenido en tu CSS principal de Tailwind v4.
+   Requiere dist/nocturna-electrica/tokens.css para los aliases
+   semánticos con theme switch (o pega sus :root/[data-theme]).
+   ============================================================ */
+
+@import "tailwindcss";
+@import "./tokens.css"; /* primitivos + aliases + [data-theme="light"] + fuentes */
+
+@theme {
+  /* == Colores primitivos → genera bg-night-900, text-accent-400, etc. == */
+  --color-accent-100: #d9f0fb;
+  --color-accent-200: #a8ddf6;
+  --color-accent-300: #7dccf1;
+  --color-accent-400: #52baed; /* acento principal — un CTA por pantalla */
+  --color-accent-500: #2fa3dd;
+  --color-accent-600: #1f87bb;
+  --color-accent-700: #186a94;
+
+  --color-indigo-300: #7a83c4;
+  --color-indigo-400: #565fa3;
+  --color-indigo-500: #353d7c; /* solo fondos — nunca texto sobre negro (1.9:1) */
+  --color-indigo-600: #2b3264;
+  --color-indigo-700: #22284f;
+  --color-indigo-800: #1a1e3b;
+
+  --color-night-950: #010203; /* fondo base */
+  --color-night-900: #0b0d12;
+  --color-night-800: #14171f;
+  --color-night-700: #1e222d;
+  --color-night-600: #2a2f3d;
+  --color-night-500: #3d4354;
+  --color-night-400: #6b7183;
+  --color-night-300: #9aa0b0;
+  --color-night-200: #c5c9d4;
+  --color-night-100: #e8eaef; /* texto principal — nunca blanco puro */
+  --color-night-50: #f6f7f9;
+
+  --color-success-400: #4ade80;
+  --color-success-950: #0a2617; /* fondo suave */
+  --color-warning-400: #fbbf24;
+  --color-warning-950: #2a2005;
+  --color-danger-400: #f87171;
+  --color-danger-950: #2c0f0f;
+  --color-info-400: #52baed;
+  --color-info-950: #0d1f2c;
+
+  /* == Tipografía → font-display, font-body, font-mono == */
+  --font-display: "Space Grotesk", system-ui, sans-serif; /* solo h1–h3 y cifras hero */
+  --font-body: "Manrope", system-ui, sans-serif;
+  --font-mono: "JetBrains Mono", monospace;
+
+  /* == Escala tipográfica (ratio 1.25) con line-heights emparejados == */
+  --text-xs: 0.75rem;      --text-xs--line-height: 1.5;
+  --text-sm: 0.875rem;     --text-sm--line-height: 1.5;
+  --text-base: 1rem;       --text-base--line-height: 1.6;
+  --text-lg: 1.125rem;     --text-lg--line-height: 1.55;
+  --text-xl: 1.25rem;      --text-xl--line-height: 1.4;
+  --text-2xl: 1.5625rem;   --text-2xl--line-height: 1.3;
+  --text-3xl: 1.9375rem;   --text-3xl--line-height: 1.2;
+  --text-4xl: 2.4375rem;   --text-4xl--line-height: 1.15;
+  --text-5xl: 3.0625rem;   --text-5xl--line-height: 1.05;
+
+  --tracking-display: -0.02em;
+  --tracking-overline: 0.08em;
+
+  /* == Radios → rounded-sm/md/lg/xl == */
+  --radius-sm: 8px;
+  --radius-md: 12px;
+  --radius-lg: 16px;
+  --radius-xl: 24px;
+
+  /* == Elevación → shadow-1/2/3 + glow == */
+  --shadow-1: 0 1px 2px rgba(0,0,0,.4);
+  --shadow-2: 0 4px 12px rgba(0,0,0,.5);
+  --shadow-3: 0 12px 32px rgba(0,0,0,.6);
+  --shadow-glow: 0 0 0 1px rgba(82,186,237,.35), 0 4px 20px rgba(82,186,237,.18); /* máx. uno por pantalla */
+
+  /* == Easings → ease-out-brand, ease-in-brand, ease-in-out-brand, ease-spring == */
+  --ease-out-brand: cubic-bezier(0.2, 0, 0, 1);
+  --ease-in-brand: cubic-bezier(0.4, 0, 1, 1);
+  --ease-in-out-brand: cubic-bezier(0.65, 0, 0.35, 1); /* moverse de A a B en pantalla */
+  --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);
+  --stagger-step: 30ms;
+
+  /* Breakpoints: los default de Tailwind (sm 640 / md 768 / lg 1024 / xl 1280)
+     coinciden con el sistema — no se redefinen.
+     Espaciado: la escala default (múltiplos de 0.25rem = 4px) coincide con
+     la escala base 4px del sistema — no se redefine. */
+}
+
+/* == Capa semántica con theme switch ==
+   Genera utilidades que cambian solas con [data-theme="light"]:
+   bg-background · bg-surface-1/2/3 · text-foreground · text-heading ·
+   text-muted-foreground · border-border · border-border-strong ·
+   bg-accent-brand · text-on-accent · text-link */
+@theme inline {
+  --color-background: var(--bg);
+  --color-surface-1: var(--surface-1);
+  --color-surface-2: var(--surface-2);
+  --color-surface-3: var(--surface-3);
+  --color-foreground: var(--text-primary);
+  --color-secondary-foreground: var(--text-secondary);
+  --color-muted-foreground: var(--text-muted);
+  --color-disabled-foreground: var(--text-disabled);
+  --color-heading: var(--text-heading);
+  --color-border: var(--border);
+  --color-border-strong: var(--border-strong);
+  --color-accent-brand: var(--accent-400);
+  --color-on-accent: var(--text-on-accent);
+  --color-link: var(--link);
+}

package/assets/nocturna/tokens.css

@@ -0,0 +1,145 @@
+/* ============================================================
+   Nocturna Eléctrica — Design Tokens v2.0
+   Sistema de diseño de Higinio Sosa · dark-first
+   Fuente de verdad: DESIGN-nocturna-electrica.md
+   Uso: importar ANTES de cualquier estilo propio.
+   Los componentes consumen SOLO aliases semánticos, nunca hex.
+   ============================================================ */
+
+@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Manrope:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');
+
+:root {
+  /* == Primitivos: acento (Celeste Eléctrico) == */
+  --accent-100: #d9f0fb; --accent-200: #a8ddf6; --accent-300: #7dccf1;
+  --accent-400: #52baed; --accent-500: #2fa3dd; --accent-600: #1f87bb; --accent-700: #186a94;
+
+  /* == Primitivos: índigo (Índigo Profundo) — nunca texto sobre negro == */
+  --indigo-300: #7a83c4; --indigo-400: #565fa3; --indigo-500: #353d7c;
+  --indigo-600: #2b3264; --indigo-700: #22284f; --indigo-800: #1a1e3b;
+
+  /* == Primitivos: escala nocturna == */
+  --night-950: #010203; --night-900: #0b0d12; --night-800: #14171f;
+  --night-700: #1e222d; --night-600: #2a2f3d; --night-500: #3d4354;
+  --night-400: #6b7183; --night-300: #9aa0b0; --night-200: #c5c9d4;
+  --night-100: #e8eaef; --night-50: #f6f7f9;
+
+  /* == Primitivos: semánticos (calibrados para dark) == */
+  --success-400: #4ade80; --success-bg: #0a2617;
+  --warning-400: #fbbf24; --warning-bg: #2a2005;
+  --danger-400: #f87171;  --danger-bg: #2c0f0f;
+  --info-400: #52baed;    --info-bg: #0d1f2c;
+
+  /* == Aliases semánticos (los componentes consumen SOLO esto) == */
+  --bg: var(--night-950);
+  --surface-1: var(--night-900);
+  --surface-2: var(--night-800);
+  --surface-3: var(--night-700);
+  --border: var(--night-500);
+  --border-strong: var(--night-600);
+  --text-primary: var(--night-100);
+  --text-secondary: var(--night-200);
+  --text-muted: var(--night-300);
+  --text-disabled: var(--night-400);
+  --text-heading: var(--night-50);
+  --text-on-accent: var(--night-950); /* texto de CTA oscuro, nunca blanco */
+  --success: var(--success-400); --warning: var(--warning-400);
+  --danger: var(--danger-400); --info: var(--info-400);
+  --link: var(--accent-400);
+  --link-hover: var(--accent-200);
+  --accent-ghost-hover: rgba(82,186,237,.08);
+  --accent-ghost-active: rgba(82,186,237,.14);
+  --accent-selected: rgba(82,186,237,.12);
+  --overlay: rgba(1,2,3,.7);
+
+  /* == Tipografía == */
+  --font-display: "Space Grotesk", system-ui, sans-serif;
+  --font-body: "Manrope", system-ui, sans-serif;
+  --font-mono: "JetBrains Mono", monospace;
+  --text-xs: .75rem; --text-sm: .875rem; --text-base: 1rem; --text-lg: 1.125rem;
+  --text-xl: 1.25rem; --text-2xl: 1.5625rem; --text-3xl: 1.9375rem;
+  --text-4xl: 2.4375rem; --text-5xl: 3.0625rem;
+  --leading-tight: 1.05; --leading-heading: 1.15; --leading-h2: 1.2;
+  --leading-h3: 1.3; --leading-h4: 1.4; --leading-snug: 1.5; --leading-body: 1.6;
+  --tracking-display: -0.02em; --tracking-overline: 0.08em;
+  --measure: 65ch;
+
+  /* == Espaciado (escala base 4px) == */
+  --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;
+  --card-padding: 24px; --card-padding-mobile: 16px;
+  --section-gap: 64px; --form-gap: 20px;
+  --button-padding: 12px 20px; --touch-target: 44px;
+  --grid-gutter: 24px; --grid-gutter-mobile: 16px;
+
+  /* == Radios y bordes == */
+  --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px;
+  --radius-xl: 24px; --radius-full: 9999px;
+  --border-default: 1px solid var(--night-500);
+  --border-emphasis: 1px solid var(--night-600);
+  --focus-ring: 2px solid var(--accent-400);
+  --focus-ring-offset: 2px;
+
+  /* == Elevación (superficie + sombra + borde) == */
+  --shadow-1: 0 1px 2px rgba(0,0,0,.4);
+  --shadow-2: 0 4px 12px rgba(0,0,0,.5);
+  --shadow-3: 0 12px 32px rgba(0,0,0,.6);
+  --glow-accent: 0 0 0 1px rgba(82,186,237,.35), 0 4px 20px rgba(82,186,237,.18); /* máx. uno por pantalla */
+  --ring: 0 0 0 3px rgba(82,186,237,.2);
+  --ring-danger: 0 0 0 3px rgba(248,113,113,.2);
+
+  /* == Motion == */
+  --duration-instant: 100ms; --duration-fast: 150ms; --duration-base: 220ms;
+  --duration-slow: 250ms; --duration-page: 350ms;
+  --ease-out: cubic-bezier(0.2, 0, 0, 1);
+  --ease-in: cubic-bezier(0.4, 0, 1, 1);
+  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* moverse de A a B en pantalla */
+  --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);
+  --stagger-step: 30ms;
+
+  color-scheme: dark;
+}
+
+/* == Modo claro (variante) — alternar data-theme en <html> == */
+[data-theme="light"] {
+  --bg: #f5f8fb;
+  --surface-1: #ffffff;
+  --surface-2: #ffffff;
+  --surface-3: #eaf1f7;
+  --border: #d8dfe8;
+  --border-strong: #b9c3d1;
+  --text-primary: #14171f;
+  --text-secondary: #3d4354;
+  --text-muted: #6b7183;
+  --text-disabled: #9aa0b0;
+  --text-heading: #14171f;
+  --link: #1f87bb;
+  --link-hover: #186a94;
+  --text-on-accent: #010203; /* CTA no cambia entre modos */
+  --success: #15803d;
+  --warning: #a16207;
+  --danger: #c03535;
+  --info: #1f87bb;
+  --success-bg: #e3f5ea; --warning-bg: #fbf3dd;
+  --danger-bg: #fbe7e7;  --info-bg: #e3f2fb;
+  --accent-ghost-hover: rgba(31,135,187,.08);
+  --accent-ghost-active: rgba(31,135,187,.14);
+  --accent-selected: rgba(82,186,237,.12);
+  --overlay: rgba(20,23,31,.45);
+  --ring: 0 0 0 3px rgba(31,135,187,.25);
+  --shadow-1: 0 1px 3px rgba(53,61,124,.08);
+  --shadow-2: 0 4px 10px rgba(53,61,124,.10);
+  --shadow-3: 0 12px 28px rgba(53,61,124,.14);
+  --glow-accent: 0 0 0 1px rgba(82,186,237,.4), 0 4px 16px rgba(82,186,237,.25);
+  color-scheme: light;
+}
+
+/* == Accesibilidad del movimiento == */
+@media (prefers-reduced-motion: reduce) {
+  *, *::before, *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    scroll-behavior: auto !important;
+  }
+}