@higinio/design-mcp 0.1.0

package/assets/celeste/tailwind.css

@@ -0,0 +1,117 @@
+/* ============================================================
+   Celeste Clásica — Tailwind CSS v4 (@theme)
+   Sistema de diseño de Higinio Sosa · light-first
+   Uso:  @import "tailwindcss";  y luego este archivo,
+   o copiar este contenido en tu CSS principal de Tailwind v4.
+   Requiere dist/celeste-clasica/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="dark"] + fuentes */
+
+@theme {
+  /* == Colores primitivos → genera bg-primary-500, text-neutral-800, etc. == */
+  --color-primary-50: #f2f6fa;
+  --color-primary-100: #dfe9f2;
+  --color-primary-200: #c3d5e6;
+  --color-primary-300: #a0c0d4; /* celeste de marca — nunca texto sobre blanco */
+  --color-primary-400: #87a8c7;
+  --color-primary-500: #7192ba; /* primario — rellenos/bordes/focus (UI 3:1) */
+  --color-primary-600: #5d7ba3;
+  --color-primary-700: #4d6588; /* --link: texto de links y ghost (AA ~6:1) */
+  --color-primary-800: #40536e;
+  --color-primary-900: #31343e; /* tinta de marca */
+
+  --color-neutral-0: #ffffff;
+  --color-neutral-50: #f7f8fa;
+  --color-neutral-100: #eef0f3;
+  --color-neutral-200: #dcdfe5;
+  --color-neutral-300: #b8bdc7;
+  --color-neutral-400: #8a8f9c;
+  --color-neutral-500: #666b78;
+  --color-neutral-600: #4d5160;
+  --color-neutral-700: #3d414e;
+  --color-neutral-800: #31343e;
+  --color-neutral-900: #22242b;
+
+  --color-success-500: #3d9970;
+  --color-success-100: #e2f3ec;
+  --color-success-700: #2b6e50; /* texto AA sobre success-100 */
+  --color-warning-500: #c9922e;
+  --color-warning-100: #faf1de;
+  --color-warning-700: #8a651c;
+  --color-danger-500: #c04d4d;
+  --color-danger-100: #f9e7e7;
+  --color-danger-700: #8f3232;
+  --color-info-500: #7192ba;
+  --color-info-100: #dfe9f2;
+  --color-info-700: #4d6588;
+
+  /* == Tipografía → font-display, font-body, font-mono == */
+  --font-display: "Fraunces", Georgia, serif;          /* solo h1–h2 y cifras hero */
+  --font-body: "Public Sans", system-ui, sans-serif;
+  --font-mono: "IBM Plex Mono", ui-monospace, 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.25;
+  --text-4xl: 2.4375rem;   --text-4xl--line-height: 1.15;
+  --text-5xl: 3.0625rem;   --text-5xl--line-height: 1.1;
+
+  --tracking-display: -0.02em;
+  --tracking-label: 0.04em;
+
+  /* == Radios → rounded-sm/md/lg/xl == */
+  --radius-sm: 6px;
+  --radius-md: 10px;
+  --radius-lg: 14px;
+  --radius-xl: 20px;
+
+  /* == Sombras (teñidas de tinta #31343e) → shadow-xs…xl == */
+  --shadow-xs: 0 1px 2px rgba(49,52,62,.06);
+  --shadow-sm: 0 1px 3px rgba(49,52,62,.08), 0 1px 2px rgba(49,52,62,.05);
+  --shadow-md: 0 4px 8px rgba(49,52,62,.09), 0 2px 4px rgba(49,52,62,.05);
+  --shadow-lg: 0 12px 24px rgba(49,52,62,.12), 0 4px 8px rgba(49,52,62,.06);
+  --shadow-xl: 0 24px 48px rgba(49,52,62,.16);
+
+  /* == 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 (shadcn-style) ==
+   Genera utilidades que cambian solas con [data-theme="dark"]:
+   bg-background · bg-surface · bg-surface-alt · text-foreground ·
+   text-muted-foreground · text-disabled-foreground · border-border ·
+   border-border-strong · bg-accent · text-link · bg-accent-soft */
+@theme inline {
+  --color-background: var(--bg);
+  --color-surface: var(--surface);
+  --color-surface-alt: var(--surface-alt);
+  --color-foreground: var(--text-primary);
+  --color-secondary-foreground: var(--text-secondary);
+  --color-muted-foreground: var(--text-muted);
+  --color-disabled-foreground: var(--text-disabled);
+  --color-border: var(--border);
+  --color-border-strong: var(--border-strong);
+  --color-accent: var(--accent);
+  --color-accent-hover: var(--accent-hover);
+  --color-accent-active: var(--accent-active);
+  --color-accent-soft: var(--accent-soft);
+  --color-accent-foreground: var(--text-on-primary);
+  --color-link: var(--link);
+}

package/assets/celeste/tokens.css

@@ -0,0 +1,137 @@
+/* ============================================================
+   Celeste Clásica — Design Tokens v2.0
+   Sistema de diseño de Higinio Sosa · light-first
+   Fuente de verdad: DESIGN-celeste-clasica.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=Fraunces:ital,opsz,wght@0,9..144,600;0,9..144,700;1,9..144,600&family=Public+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400&family=IBM+Plex+Mono:wght@400;500&display=swap");
+
+:root {
+  /* == Primitivos: primario (Azul Acero) == */
+  --primary-50: #f2f6fa; --primary-100: #dfe9f2; --primary-200: #c3d5e6;
+  --primary-300: #a0c0d4; --primary-400: #87a8c7; --primary-500: #7192ba;
+  --primary-600: #5d7ba3; --primary-700: #4d6588; --primary-800: #40536e;
+  --primary-900: #31343e;
+
+  /* == Primitivos: neutrales (Gris Azulado) == */
+  --neutral-0: #ffffff; --neutral-50: #f7f8fa; --neutral-100: #eef0f3;
+  --neutral-200: #dcdfe5; --neutral-300: #b8bdc7; --neutral-400: #8a8f9c;
+  --neutral-500: #666b78; --neutral-600: #4d5160; --neutral-700: #3d414e;
+  --neutral-800: #31343e; --neutral-900: #22242b;
+
+  /* == Primitivos: semánticos (ramp de 3: sólido / fondo / texto AA) == */
+  --success-500: #3d9970; --success-100: #e2f3ec; --success-text: #2b6e50;
+  --warning-500: #c9922e; --warning-100: #faf1de; --warning-text: #8a651c;
+  --danger-500: #c04d4d;  --danger-100: #f9e7e7;  --danger-text: #8f3232;
+  --info-500: #7192ba;    --info-100: #dfe9f2;    --info-text: #4d6588;
+
+  /* == Aliases semánticos (los componentes consumen SOLO esto) == */
+  --bg: var(--neutral-50);
+  --surface: var(--neutral-0);
+  --surface-alt: var(--neutral-100);
+  --border: var(--neutral-200);
+  --border-strong: var(--neutral-300);
+  --text-primary: var(--neutral-800);
+  --text-secondary: var(--neutral-600);
+  --text-muted: var(--neutral-500);
+  --text-disabled: var(--neutral-400);
+  --text-on-primary: #ffffff;
+  --text-on-primary-solid: var(--primary-700);
+  --accent: var(--primary-500);
+  --accent-hover: var(--primary-600);
+  --accent-active: var(--primary-700);
+  --accent-soft: var(--primary-50);
+  --accent-soft-strong: var(--primary-100);
+  --link: var(--primary-700); /* AA ~6:1 — texto de links y ghost; primary-500 solo para UI */
+
+  /* == Tipografía == */
+  --font-display: "Fraunces", Georgia, serif;
+  --font-body: "Public Sans", system-ui, -apple-system, sans-serif;
+  --font-mono: "IBM Plex Mono", ui-monospace, 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-xs: 1.5; --leading-sm: 1.5; --leading-base: 1.6; --leading-lg: 1.55;
+  --leading-xl: 1.4; --leading-2xl: 1.3; --leading-3xl: 1.25;
+  --leading-4xl: 1.15; --leading-5xl: 1.1;
+  --tracking-display: -0.02em; --tracking-body: 0; --tracking-label: 0.04em;
+  --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700;
+  --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: var(--space-6); --card-padding-mobile: var(--space-4);
+  --section-gap: var(--space-16); --form-gap: var(--space-5);
+  --button-padding-md: 12px 20px; --button-padding-sm: 8px 14px;
+  --control-height-sm: 36px; --control-height-md: 44px; --control-height-lg: 52px;
+  --gutter: 24px; --gutter-mobile: 16px;
+
+  /* == Radios, bordes y sombras (teñidas de tinta, nunca negro puro) == */
+  --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px;
+  --radius-xl: 20px; --radius-full: 9999px;
+  --border-width: 1px;
+  --shadow-xs: 0 1px 2px rgba(49,52,62,.06);
+  --shadow-sm: 0 1px 3px rgba(49,52,62,.08), 0 1px 2px rgba(49,52,62,.05);
+  --shadow-md: 0 4px 8px rgba(49,52,62,.09), 0 2px 4px rgba(49,52,62,.05);
+  --shadow-lg: 0 12px 24px rgba(49,52,62,.12), 0 4px 8px rgba(49,52,62,.06);
+  --shadow-xl: 0 24px 48px rgba(49,52,62,.16);
+
+  /* == Focus == */
+  --ring: 0 0 0 3px rgba(113,146,186,.25);
+  --ring-color: rgba(113,146,186,.25);
+
+  /* == Motion == */
+  --duration-instant: 100ms; --duration-fast: 150ms; --duration-base: 200ms;
+  --duration-slow: 250ms; --duration-page: 320ms;
+  --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: light;
+}
+
+/* == Modo oscuro (variante) — alternar data-theme en <html> == */
+[data-theme="dark"] {
+  --bg: #16181e;
+  --surface: #1d2028;
+  --surface-alt: #252935;
+  --border: #3a3f4d;
+  --border-strong: #4a5060;
+  --text-primary: #e6e9ee;
+  --text-secondary: #b9bfcb;
+  --text-muted: #8b91a0;
+  --text-disabled: #6f7585;
+  --accent: #87a8c7;
+  --accent-hover: #a0c0d4;
+  --accent-active: #7192ba;
+  --accent-soft: rgba(113,146,186,.12);
+  --accent-soft-strong: rgba(113,146,186,.2);
+  --text-on-primary: #16181e;
+  --link: #a0c0d4;
+  --success-500: #5cbf93; --success-100: #12291f; --success-text: #7fd4ae;
+  --warning-500: #e0ad4d; --warning-100: #2b2210; --warning-text: #ecc57e;
+  --danger-500: #e07777;  --danger-100: #2e1515;  --danger-text: #eb9e9e;
+  --info-500: #87a8c7;    --info-100: #1a2430;    --info-text: #a0c0d4;
+  --ring: 0 0 0 3px rgba(160,192,212,.3);
+  --ring-color: rgba(160,192,212,.3);
+  --shadow-sm: 0 1px 2px rgba(0,0,0,.35);
+  --shadow-md: 0 4px 12px rgba(0,0,0,.45);
+  --shadow-lg: 0 12px 32px rgba(0,0,0,.55);
+  color-scheme: dark;
+}
+
+/* == 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;
+  }
+}