Reordenando ficheros y subida de documentacion
This commit is contained in:
Carlos Narro
221
design/design-tokens.css
Normal file
221
design/design-tokens.css
Normal file
@@ -0,0 +1,221 @@
|
||||
/* Reformix — Design Tokens
|
||||
* Generado a partir de design-system.md + design-tokens.json
|
||||
* Stack: Tailwind + shadcn/ui (compatibilidad con CSS custom properties)
|
||||
* Versión: 1.0 (2026-05-24)
|
||||
*/
|
||||
|
||||
@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');
|
||||
|
||||
:root {
|
||||
/* ============================================
|
||||
* COLOR — Brand (Architectural Warmth)
|
||||
* ============================================ */
|
||||
|
||||
/* Primary — Verde oliva */
|
||||
--color-primary-50: #F4F8F5;
|
||||
--color-primary-100: #E8F0EB;
|
||||
--color-primary-300: #A8C8B5;
|
||||
--color-primary-500: #4D8A6D;
|
||||
--color-primary-700: #2F5C46;
|
||||
--color-primary-900: #1F3A2E;
|
||||
|
||||
/* Accent — Terracota */
|
||||
--color-accent-100: #FAEAE0;
|
||||
--color-accent-400: #E08A5F;
|
||||
--color-accent-600: #C25E33;
|
||||
--color-accent-900: #7A3517;
|
||||
|
||||
/* ============================================
|
||||
* COLOR — Neutral (Stone — warm grays con tinte oliva)
|
||||
* ============================================ */
|
||||
|
||||
--color-white: #FFFFFF;
|
||||
--color-neutral-50: #F7F8F7;
|
||||
--color-neutral-100: #EDEFED;
|
||||
--color-neutral-200: #DDE0DD;
|
||||
--color-neutral-300: #C4C9C4;
|
||||
--color-neutral-400: #9DA29D;
|
||||
--color-neutral-500: #7A807A;
|
||||
--color-neutral-700: #4A4E4A;
|
||||
--color-neutral-900: #262826;
|
||||
--color-neutral-950: #161816;
|
||||
|
||||
/* ============================================
|
||||
* COLOR — Semantic
|
||||
* ============================================ */
|
||||
|
||||
--color-success-100: #E0F0E6;
|
||||
--color-success-500: #4DAA73;
|
||||
--color-success-700: #2D7A4F;
|
||||
|
||||
--color-warning-100: #FAEFD3;
|
||||
--color-warning-500: #DA9A2C;
|
||||
--color-warning-700: #9A6B0E;
|
||||
|
||||
--color-danger-100: #FAE0DA;
|
||||
--color-danger-500: #D85940;
|
||||
--color-danger-700: #A8331F;
|
||||
|
||||
--color-info-100: #DDEDF5;
|
||||
--color-info-500: #3D8AAA;
|
||||
--color-info-700: #1F5C7A;
|
||||
|
||||
/* ============================================
|
||||
* COLOR — Surface aliases (uso semántico en componentes)
|
||||
* ============================================ */
|
||||
|
||||
--surface-background: var(--color-white);
|
||||
--surface-background-muted: var(--color-neutral-50);
|
||||
--surface-background-emphasis: var(--color-primary-50);
|
||||
--surface-foreground: var(--color-neutral-950);
|
||||
--surface-foreground-muted: var(--color-neutral-500);
|
||||
--surface-border: var(--color-neutral-200);
|
||||
--surface-border-strong: var(--color-neutral-300);
|
||||
|
||||
/* ============================================
|
||||
* TYPOGRAPHY
|
||||
* ============================================ */
|
||||
|
||||
--font-display: 'Instrument Serif', Georgia, serif;
|
||||
--font-sans: 'Inter', system-ui, -apple-system, sans-serif;
|
||||
--font-mono: 'JetBrains Mono', ui-monospace, monospace;
|
||||
|
||||
--font-weight-regular: 400;
|
||||
--font-weight-medium: 500;
|
||||
--font-weight-semibold: 600;
|
||||
--font-weight-bold: 700;
|
||||
|
||||
--text-xs: 0.75rem;
|
||||
--text-sm: 0.875rem;
|
||||
--text-base: 1rem;
|
||||
--text-lg: 1.125rem;
|
||||
--text-xl: 1.25rem;
|
||||
--text-2xl: 1.5rem;
|
||||
--text-3xl: 1.875rem;
|
||||
--text-4xl: 2.25rem;
|
||||
--text-5xl: 3rem;
|
||||
--text-6xl: 3.75rem;
|
||||
--text-7xl: 4.5rem;
|
||||
|
||||
--leading-tight: 1.1;
|
||||
--leading-snug: 1.3;
|
||||
--leading-normal: 1.5;
|
||||
--leading-relaxed: 1.6;
|
||||
|
||||
/* ============================================
|
||||
* SPACING (base 4px, coherente con Tailwind)
|
||||
* ============================================ */
|
||||
|
||||
--space-1: 0.25rem;
|
||||
--space-2: 0.5rem;
|
||||
--space-3: 0.75rem;
|
||||
--space-4: 1rem;
|
||||
--space-6: 1.5rem;
|
||||
--space-8: 2rem;
|
||||
--space-12: 3rem;
|
||||
--space-16: 4rem;
|
||||
--space-24: 6rem;
|
||||
--space-32: 8rem;
|
||||
|
||||
/* ============================================
|
||||
* CONTAINER WIDTHS
|
||||
* ============================================ */
|
||||
|
||||
--container-narrow: 720px;
|
||||
--container-default: 1200px;
|
||||
--container-wide: 1440px;
|
||||
|
||||
--gutter-mobile: 24px;
|
||||
--gutter-desktop: 48px;
|
||||
|
||||
/* ============================================
|
||||
* BORDER RADIUS
|
||||
* ============================================ */
|
||||
|
||||
--radius-sm: 4px;
|
||||
--radius-md: 6px;
|
||||
--radius-lg: 10px;
|
||||
--radius-xl: 14px;
|
||||
--radius-2xl: 20px;
|
||||
--radius-full: 9999px;
|
||||
|
||||
/* ============================================
|
||||
* SHADOWS (warm, base neutral-950 — no negro puro)
|
||||
* ============================================ */
|
||||
|
||||
--shadow-xs: 0 1px 2px rgba(22, 24, 22, 0.05);
|
||||
--shadow-sm: 0 1px 3px rgba(22, 24, 22, 0.08), 0 1px 2px rgba(22, 24, 22, 0.04);
|
||||
--shadow-md: 0 4px 6px rgba(22, 24, 22, 0.07), 0 2px 4px rgba(22, 24, 22, 0.04);
|
||||
--shadow-lg: 0 10px 15px rgba(22, 24, 22, 0.08), 0 4px 6px rgba(22, 24, 22, 0.05);
|
||||
--shadow-xl: 0 20px 25px rgba(22, 24, 22, 0.1), 0 10px 10px rgba(22, 24, 22, 0.04);
|
||||
--shadow-glow: 0 0 0 4px rgba(47, 92, 70, 0.15);
|
||||
|
||||
/* ============================================
|
||||
* MOTION
|
||||
* ============================================ */
|
||||
|
||||
--duration-fast: 150ms;
|
||||
--duration-base: 250ms;
|
||||
--duration-slow: 400ms;
|
||||
|
||||
--easing-out: cubic-bezier(0.16, 1, 0.3, 1);
|
||||
--easing-in: cubic-bezier(0.7, 0, 0.84, 0);
|
||||
--easing-in-out: cubic-bezier(0.65, 0, 0.35, 1);
|
||||
|
||||
/* ============================================
|
||||
* Z-INDEX scale (orden visual)
|
||||
* ============================================ */
|
||||
|
||||
--z-dropdown: 50;
|
||||
--z-sticky: 100;
|
||||
--z-overlay: 200;
|
||||
--z-modal: 300;
|
||||
--z-popover: 400;
|
||||
--z-toast: 500;
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
* Base styles
|
||||
* ============================================ */
|
||||
|
||||
html {
|
||||
font-family: var(--font-sans);
|
||||
font-size: 16px;
|
||||
color: var(--surface-foreground);
|
||||
background: var(--surface-background);
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
body {
|
||||
line-height: var(--leading-relaxed);
|
||||
}
|
||||
|
||||
h1, h2 {
|
||||
font-family: var(--font-display);
|
||||
font-weight: var(--font-weight-regular);
|
||||
line-height: var(--leading-tight);
|
||||
color: var(--color-neutral-950);
|
||||
}
|
||||
|
||||
h3, h4, h5, h6 {
|
||||
font-family: var(--font-sans);
|
||||
font-weight: var(--font-weight-semibold);
|
||||
line-height: var(--leading-snug);
|
||||
color: var(--color-neutral-900);
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
* Reduced motion
|
||||
* ============================================ */
|
||||
|
||||
@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;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user