/* * iERP design tokens — fase 1 (Twig). * * Fuente de verdad: docs/10-architecture/design-system.md § 2. * Decisión: ADR-0012 (design-system-and-ui-runtime). * * Convenciones: * - Color en OKLCH, no HSL ni hex. * - Light-first. `.dark` en activa el dark. * - 3 niveles de foreground: titular / body / muted-soft. * - Radius unificado 0.75rem. * - Tipografía Geist (sans + mono) + system-ui de fallback. * * Cualquier componente que necesite un color debe consumir una de * estas variables. Si falta una, se añade aquí y se documenta en * design-system.md (regla del DS, ADR-0012 §anti-patrones). */ :root { /* Radius — `--radius` es el canónico; las variantes (sm/md/lg/xl) se derivan de él para que cambiar el canónico propague a todo. Mapean a los `rounded-*` de Tailwind que el DS §9 documenta. */ --radius: 0.75rem; --radius-sm: calc(var(--radius) - 0.25rem); --radius-md: calc(var(--radius) - 0.125rem); --radius-lg: var(--radius); --radius-xl: calc(var(--radius) + 0.25rem); --radius-full: 9999px; /* Spacing — base 4px (Tailwind/shadcn). Sólo las paradas que el DS usa con frecuencia; añadir aquí si una pantalla pide una nueva. */ --space-0: 0; --space-px: 1px; --space-0_5: 0.125rem; --space-1: 0.25rem; --space-1_5: 0.375rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-7: 1.75rem; --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem; --space-16: 4rem; --space-24: 6rem; /* Tipografía — escala canónica del DS §3. Mantenemos las alturas base como tokens para que componentes Twig (sin Tailwind) puedan consumirlas sin re-declarar pixeles. */ --text-xs: 0.75rem; /* 12 */ --text-sm: 0.875rem; /* 14 — body default */ --text-base: 1rem; /* 16 — section title */ --text-lg: 1.125rem; /* 18 */ --text-xl: 1.25rem; /* 20 */ --text-2xl: 1.5rem; /* 24 — page H1 mobile */ --text-3xl: 1.875rem; /* 30 — page H1 sm+ */ --leading-tight: 1.25; --leading-normal: 1.5; --tracking-tight: -0.02em; --tracking-tighter: -0.04em; /* Sombras — escala perceptual coherente con shadcn. Light-first; ajustes para dark más abajo. */ --shadow-xs: 0 1px 2px 0 oklch(0 0 0 / 0.04); --shadow-sm: 0 1px 2px 0 oklch(0 0 0 / 0.06), 0 1px 1px 0 oklch(0 0 0 / 0.04); --shadow-md: 0 4px 8px -2px oklch(0 0 0 / 0.08), 0 2px 4px -2px oklch(0 0 0 / 0.04); --shadow-lg: 0 12px 24px -6px oklch(0 0 0 / 0.12), 0 4px 8px -2px oklch(0 0 0 / 0.06); --shadow-xl: 0 24px 48px -12px oklch(0 0 0 / 0.18); /* Z-index — bandas con números espaciados para que se puedan interpolar overlays modulares (e.g. sub-menús dentro de dialogs) sin pelearse con la siguiente capa. */ --z-base: 0; --z-sticky: 10; --z-dropdown: 50; --z-overlay: 100; --z-modal: 200; --z-popover: 300; --z-toast: 400; --z-tooltip: 500; /* Motion — duraciones y curvas del DS §10. transition-colors usa `--duration-fast`; transition-all en Button usa `--duration-base`. */ --duration-instant: 80ms; --duration-fast: 120ms; --duration-base: 200ms; --duration-slow: 320ms; --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); --ease-emphasized: cubic-bezier(0.2, 0, 0, 1); --ease-decelerate: cubic-bezier(0, 0, 0.2, 1); --background: oklch(1 0 0); --surface-soft: oklch(0.98 0 0); --card: oklch(0.965 0 0); --card-foreground: oklch(0.18 0 0); --popover: oklch(1 0 0); --popover-foreground: oklch(0.18 0 0); --muted: oklch(0.965 0 0); --muted-foreground: oklch(0.51 0 0); --accent: oklch(0.98 0 0); --accent-foreground: oklch(0.18 0 0); --foreground: oklch(0.18 0 0); --foreground-body: oklch(0.34 0 0); --foreground-muted-soft: oklch(0.59 0 0); --border: oklch(0.92 0 0); --border-soft: oklch(0.96 0 0); --input: oklch(0.92 0 0); --ring: oklch(0.18 0 0); --primary: oklch(0.18 0 0); --primary-active: oklch(0.27 0 0); --primary-foreground: oklch(1 0 0); --secondary: oklch(0.965 0 0); --secondary-foreground: oklch(0.18 0 0); --destructive: oklch(0.62 0.22 22); --destructive-foreground: oklch(0.99 0 0); --success: oklch(0.69 0.16 162); --warning: oklch(0.74 0.17 60); --info: oklch(0.6 0.21 250); --agent-1: oklch(0.74 0.17 60); /* ámbar */ --agent-2: oklch(0.71 0.21 0); /* rojo */ --agent-3: oklch(0.65 0.21 295); /* violeta */ --agent-4: oklch(0.78 0.16 162); /* teal */ --agent-5: oklch(0.6 0.21 250); /* azul */ /* Tipografía. Geist se sirve desde /assets/shared/fonts/ (auto-host vía @fontsource cuando entre la SPA, F4 del roadmap fe.spa-pilot). Hasta entonces consumimos system-ui como fallback funcional. */ --font-sans: "Geist", "Geist Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; /* Tokens transicionales — auth UX hasta que aterrice el shell de app (sidebar/topbar) y permita prescindir del fondo decorativo. Documentado en design-system.md § 13 (deltas iERP). */ --auth-gradient-from: oklch(0.27 0.04 220); --auth-gradient-to: oklch(0.42 0.05 220); } .dark { --background: oklch(0.08 0 0); --surface-soft: oklch(0.12 0 0); --card: oklch(0.12 0 0); --card-foreground: oklch(0.99 0 0); --popover: oklch(0.12 0 0); --popover-foreground: oklch(0.99 0 0); --muted: oklch(0.15 0 0); --muted-foreground: oklch(0.71 0 0); --accent: oklch(0.15 0 0); --accent-foreground: oklch(0.99 0 0); --foreground: oklch(0.99 0 0); --foreground-body: oklch(0.85 0 0); --foreground-muted-soft: oklch(0.65 0 0); --border: oklch(0.19 0 0); --border-soft: oklch(0.15 0 0); --input: oklch(0.19 0 0); --ring: oklch(0.99 0 0); --primary: oklch(0.99 0 0); --primary-active: oklch(0.92 0 0); --primary-foreground: oklch(0.08 0 0); --secondary: oklch(0.15 0 0); --secondary-foreground: oklch(0.99 0 0); --destructive: oklch(0.65 0.22 22); --destructive-foreground: oklch(0.99 0 0); --success: oklch(0.74 0.16 162); --warning: oklch(0.78 0.17 60); --info: oklch(0.66 0.2 250); --agent-1: oklch(0.78 0.17 60); --agent-2: oklch(0.74 0.2 0); --agent-3: oklch(0.7 0.2 295); --agent-4: oklch(0.8 0.16 162); --agent-5: oklch(0.66 0.2 250); --auth-gradient-from: oklch(0.16 0.02 220); --auth-gradient-to: oklch(0.24 0.03 220); /* Sombras en dark: subimos el alpha porque sobre fondos oscuros la misma opacidad luce invisible. Mantenemos la misma forma para que los componentes no tengan que ramificar por tema. */ --shadow-xs: 0 1px 2px 0 oklch(0 0 0 / 0.45); --shadow-sm: 0 1px 2px 0 oklch(0 0 0 / 0.55), 0 1px 1px 0 oklch(0 0 0 / 0.35); --shadow-md: 0 4px 8px -2px oklch(0 0 0 / 0.55), 0 2px 4px -2px oklch(0 0 0 / 0.35); --shadow-lg: 0 12px 24px -6px oklch(0 0 0 / 0.6), 0 4px 8px -2px oklch(0 0 0 / 0.4); --shadow-xl: 0 24px 48px -12px oklch(0 0 0 / 0.7); } /* Switch de tema controlado por JS (theme.js). Cuando el usuario selecciona "system" exponemos `data-theme="system"` en y el media query toma el control: si el SO está en dark, se aplica la misma paleta que `.dark`. Esto evita parpadeos al cambiar `.dark` class on/off en cada media-query toggle. */ @media (prefers-color-scheme: dark) { html[data-theme="system"] { --background: oklch(0.08 0 0); --surface-soft: oklch(0.12 0 0); --card: oklch(0.12 0 0); --card-foreground: oklch(0.99 0 0); --popover: oklch(0.12 0 0); --popover-foreground: oklch(0.99 0 0); --muted: oklch(0.15 0 0); --muted-foreground: oklch(0.71 0 0); --accent: oklch(0.15 0 0); --accent-foreground: oklch(0.99 0 0); --foreground: oklch(0.99 0 0); --foreground-body: oklch(0.85 0 0); --foreground-muted-soft: oklch(0.65 0 0); --border: oklch(0.19 0 0); --border-soft: oklch(0.15 0 0); --input: oklch(0.19 0 0); --ring: oklch(0.99 0 0); --primary: oklch(0.99 0 0); --primary-active: oklch(0.92 0 0); --primary-foreground: oklch(0.08 0 0); --secondary: oklch(0.15 0 0); --secondary-foreground: oklch(0.99 0 0); --destructive: oklch(0.65 0.22 22); --destructive-foreground: oklch(0.99 0 0); --success: oklch(0.74 0.16 162); --warning: oklch(0.78 0.17 60); --info: oklch(0.66 0.2 250); --agent-1: oklch(0.78 0.17 60); --agent-2: oklch(0.74 0.2 0); --agent-3: oklch(0.7 0.2 295); --agent-4: oklch(0.8 0.16 162); --agent-5: oklch(0.66 0.2 250); --auth-gradient-from: oklch(0.16 0.02 220); --auth-gradient-to: oklch(0.24 0.03 220); --shadow-xs: 0 1px 2px 0 oklch(0 0 0 / 0.45); --shadow-sm: 0 1px 2px 0 oklch(0 0 0 / 0.55), 0 1px 1px 0 oklch(0 0 0 / 0.35); --shadow-md: 0 4px 8px -2px oklch(0 0 0 / 0.55), 0 2px 4px -2px oklch(0 0 0 / 0.35); --shadow-lg: 0 12px 24px -6px oklch(0 0 0 / 0.6), 0 4px 8px -2px oklch(0 0 0 / 0.4); --shadow-xl: 0 24px 48px -12px oklch(0 0 0 / 0.7); } } /* Tipografía base + reset cooperativo. Vive aquí para que cualquier plantilla que importe tokens.css quede coherente sin tener que declarar font-family explícitamente. Sigue design-system.md §3: body con `--foreground-body`, h1/h2/h3 con `--foreground`, font-weight 600, letter-spacing -0.04em, features cv11 + ss01. */ html { font-family: var(--font-sans); font-feature-settings: "cv11", "ss01"; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; line-height: 1.5; } /* Defaults globales de body — envueltos en `@layer base` (igual que h1-h6 más abajo) para que las utilities Tailwind `.bg-background-1` / `.bg-background-2` / etc. en `@layer utilities` puedan sobreescribir el background-color cuando el twig las aplica. Sin el wrap, esta regla unlayered ganaba a cualquier utility por la regla CSS de "unlayered > layered" del cascade. */ @layer base { body { background: var(--background); color: var(--foreground-body); font-size: 14px; /* DS body = text-sm */ margin: 0; } } /* Surface gris detrás del shell — fijado a `#f9fafb` (= Tailwind/Preline `gray-50`, oklch 98.5%). Sutil pero diferenciado del blanco puro de los cards `bg-layer`. Regla unlayered (specificity 0,1,1) — gana al utility layered y al body element en `@layer base`, y queda independiente de cualquier futura mutación del token `--background-1` en upstream Preline. */ body.bg-background-1 { background-color: #f9fafb; } .dark body.bg-background-1 { background-color: oklch(0.10 0 0); } /* Reglas de defaults para headings — envueltas en `@layer base` para que las utilities Tailwind (`text-lg`, `tracking-normal`, etc.) que viven en `@layer utilities` puedan sobreescribir cuando se aplican explícitamente en el twig. Cascade layer order: theme < base < components < utilities; rules unlayered ganan a todo lo layered. Antes estas reglas vivían unlayered y bloqueaban a las utilities Tailwind sin importar specificity. */ @layer base { h1, h2, h3, h4, h5, h6 { color: var(--foreground); font-weight: 600; letter-spacing: -0.04em; line-height: 1.25; margin: 0; } /* Escala canónica del DS §3 — la materializamos en CSS porque no usamos Tailwind en el Twig (la SPA sí). */ h1 { font-size: 1.5rem; } /* 24px = text-2xl */ @media (min-width: 640px) { h1 { font-size: 1.875rem; } } /* sm:text-3xl */ h2 { font-size: 1rem; } /* 16px = text-base, section title */ h3 { font-size: 0.875rem; font-weight: 500; } /* 14px = text-sm, card title */ } ::selection { background: color-mix(in oklab, var(--ring) 25%, transparent); } /* Backfill de utilities Tailwind que el bundle precompilado actual no genera. `tailwind.compiled.css` y `preline/main.min.css` sólo traen `tracking-tight` y `tracking-wide`; usamos `tracking-normal` en pantallas nuevas para neutralizar el tightening base de h1/h2/h3 del DS legacy. Cuando regeneremos el bundle (Vite/Tailwind v4), esta regla podrá borrarse — Tailwind v4 ya define `--tracking-normal: 0em`. */ @layer utilities { .tracking-normal { letter-spacing: 0; } }