/* ============================================================================ Monai · tokens.css Sistema de design tokens. 3 pieles (skins) × 2 esquemas (claro / oscuro). Uso: Las custom properties heredan, así que también se puede scopear a un bloque:
…
(esto es lo que usa design-system.html para previsualizar las 3 propuestas). Port a Angular 21 / Material 21: estos tokens mapean 1:1 a los system tokens de M3 — ver ANGULAR.md §3. ========================================================================= */ /* --------------------------------------------------------------------------- 1. Tokens NO cromáticos — compartidos por las 3 pieles ------------------------------------------------------------------------ */ :root { /* Tipografía — stacks con fallback del sistema, cero fuentes remotas */ --font-display: 'Poppins', 'Montserrat', ui-rounded, -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; --font-body: 'Open Sans', -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', system-ui, sans-serif; --font-mono: ui-monospace, 'SF Mono', 'JetBrains Mono', 'IBM Plex Mono', Menlo, monospace; /* Escala tipográfica fluida */ --t-display: clamp(28px, 1.4rem + 1.8vw, 40px); --t-h1: clamp(22px, 1.15rem + 1vw, 30px); --t-h2: clamp(18px, 1rem + 0.5vw, 22px); --t-h3: 16px; --t-body: 15px; --t-sm: 13px; --t-xs: 11.5px; /* Espaciado — escala de 4 */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px; --s-12: 48px; --s-16: 64px; /* Radios — M3 shape scale */ --r-xs: 6px; --r-sm: 10px; --r-md: 14px; --r-lg: 20px; --r-xl: 28px; --r-full: 999px; /* Layout */ --sidebar-w: 248px; --topbar-h: 60px; --bottomnav-h: 64px; --content-max: 1320px; /* Motion — curvas M3 expressive */ --ease-std: cubic-bezier(0.2, 0, 0, 1); --ease-emph: cubic-bezier(0.05, 0.7, 0.1, 1); --dur-1: 120ms; --dur-2: 220ms; --dur-3: 380ms; --focus-ring: 2px; } /* --------------------------------------------------------------------------- 2. PIEL A · "Ledger" — índigo tinta + neutrales fríos [POR DEFECTO] Precisa, tabular, Material 21 nativa. Es la que usan las 9 pantallas. ------------------------------------------------------------------------ */ :root, [data-skin='ledger'] { --bg: oklch(98.5% 0.003 265); --surface: oklch(100% 0 0); --surface-2: oklch(96.6% 0.005 265); --surface-3: oklch(94% 0.008 265); --fg: oklch(21% 0.021 265); --muted: oklch(50% 0.017 265); --border: oklch(91% 0.007 265); --border-strong: oklch(82% 0.012 265); --primary: oklch(47% 0.152 264); --on-primary: oklch(100% 0 0); --primary-container: oklch(93% 0.035 264); --on-primary-container: oklch(30% 0.11 264); --pos: oklch(52% 0.128 158); /* ingresos */ --neg: oklch(52% 0.168 25); /* egresos */ --warn: oklch(60% 0.13 72); /* alerta de presupuesto */ --info: oklch(53% 0.115 240); --habit: oklch(56% 0.135 300); /* dominio hábitos */ --pos-soft: oklch(95% 0.035 158); --neg-soft: oklch(95.5% 0.03 25); --warn-soft: oklch(96% 0.045 72); --habit-soft: oklch(95.5% 0.03 300); --shadow-1: 0 1px 2px oklch(21% 0.021 265 / 0.06), 0 1px 3px oklch(21% 0.021 265 / 0.05); --shadow-2: 0 4px 12px oklch(21% 0.021 265 / 0.09), 0 1px 3px oklch(21% 0.021 265 / 0.05); --scrim: oklch(21% 0.021 265 / 0.45); } [data-theme='dark'], [data-skin='ledger'][data-theme='dark'] { --bg: oklch(17.5% 0.016 265); --surface: oklch(21.5% 0.019 265); --surface-2: oklch(25.5% 0.021 265); --surface-3: oklch(29.5% 0.023 265); --fg: oklch(95% 0.006 265); --muted: oklch(70% 0.017 265); --border: oklch(31% 0.021 265); --border-strong: oklch(41% 0.025 265); --primary: oklch(78% 0.115 264); --on-primary: oklch(20% 0.08 264); --primary-container: oklch(33% 0.09 264); --on-primary-container: oklch(90% 0.05 264); --pos: oklch(75% 0.145 158); --neg: oklch(72% 0.145 25); --warn: oklch(80% 0.135 78); --info: oklch(76% 0.11 240); --habit: oklch(78% 0.12 300); --pos-soft: oklch(28% 0.055 158); --neg-soft: oklch(28% 0.06 25); --warn-soft: oklch(29% 0.055 72); --habit-soft: oklch(28% 0.05 300); --shadow-1: 0 1px 2px oklch(0% 0 0 / 0.4); --shadow-2: 0 6px 18px oklch(0% 0 0 / 0.5); --scrim: oklch(10% 0.01 265 / 0.6); } /* --------------------------------------------------------------------------- 3. PIEL B · "Nocturno" — dark-first, azul profundo + cian eléctrico Pensada para uso nocturno y modo full screen. El claro es el modo débil. ------------------------------------------------------------------------ */ [data-skin='nocturno'] { --bg: oklch(97.5% 0.006 225); --surface: oklch(100% 0 0); --surface-2: oklch(95.5% 0.009 225); --surface-3: oklch(92.5% 0.012 225); --fg: oklch(20% 0.03 245); --muted: oklch(49% 0.022 245); --border: oklch(90% 0.011 225); --border-strong: oklch(80% 0.018 225); --primary: oklch(48% 0.125 224); --on-primary: oklch(100% 0 0); --primary-container: oklch(92% 0.04 224); --on-primary-container: oklch(30% 0.09 224); --pos: oklch(52% 0.13 165); --neg: oklch(53% 0.16 15); --warn: oklch(62% 0.13 68); --info: oklch(52% 0.12 224); --habit: oklch(55% 0.14 285); --pos-soft: oklch(95% 0.035 165); --neg-soft: oklch(95.5% 0.03 15); --warn-soft: oklch(96% 0.045 68); --habit-soft: oklch(95.5% 0.03 285); --shadow-1: 0 1px 2px oklch(20% 0.03 245 / 0.07); --shadow-2: 0 4px 14px oklch(20% 0.03 245 / 0.11); --scrim: oklch(20% 0.03 245 / 0.5); } [data-skin='nocturno'][data-theme='dark'] { --bg: oklch(15% 0.032 258); --surface: oklch(19.5% 0.038 258); --surface-2: oklch(24% 0.042 256); --surface-3: oklch(28.5% 0.046 254); --fg: oklch(96% 0.012 240); --muted: oklch(71% 0.028 240); --border: oklch(30% 0.045 254); --border-strong: oklch(42% 0.055 250); --primary: oklch(82% 0.145 205); --on-primary: oklch(18% 0.05 240); --primary-container: oklch(32% 0.085 215); --on-primary-container: oklch(90% 0.09 205); --pos: oklch(84% 0.17 140); --neg: oklch(72% 0.15 18); --warn: oklch(83% 0.14 82); --info: oklch(80% 0.12 230); --habit: oklch(80% 0.13 295); --pos-soft: oklch(27% 0.07 140); --neg-soft: oklch(27% 0.07 18); --warn-soft: oklch(28% 0.06 82); --habit-soft: oklch(27% 0.06 295); --shadow-1: 0 1px 2px oklch(0% 0 0 / 0.5); --shadow-2: 0 8px 24px oklch(0% 0 0 / 0.6); --scrim: oklch(8% 0.02 258 / 0.68); } /* --------------------------------------------------------------------------- 4. PIEL C · "Papel" — tinta sobre papel, un solo acento, cero sombra Máxima legibilidad, densidad editorial. Bordes en vez de elevación. ------------------------------------------------------------------------ */ [data-skin='papel'] { --bg: oklch(98% 0.004 95); --surface: oklch(100% 0.002 95); --surface-2: oklch(96% 0.006 95); --surface-3: oklch(93.5% 0.008 95); --fg: oklch(19% 0.014 70); --muted: oklch(47% 0.012 70); --border: oklch(87% 0.008 90); --border-strong: oklch(72% 0.012 90); --primary: oklch(42% 0.13 30); --on-primary: oklch(99% 0.004 95); --primary-container: oklch(94% 0.03 40); --on-primary-container: oklch(30% 0.1 30); --pos: oklch(45% 0.11 155); --neg: oklch(45% 0.15 28); --warn: oklch(55% 0.12 70); --info: oklch(45% 0.1 240); --habit: oklch(45% 0.1 285); --pos-soft: oklch(95.5% 0.028 155); --neg-soft: oklch(96% 0.026 28); --warn-soft: oklch(96% 0.04 70); --habit-soft: oklch(96% 0.025 285); --shadow-1: none; --shadow-2: none; --scrim: oklch(19% 0.014 70 / 0.42); } [data-skin='papel'][data-theme='dark'] { --bg: oklch(16% 0.008 80); --surface: oklch(20% 0.009 80); --surface-2: oklch(24% 0.01 80); --surface-3: oklch(28% 0.011 80); --fg: oklch(94% 0.008 90); --muted: oklch(70% 0.011 90); --border: oklch(32% 0.011 80); --border-strong: oklch(46% 0.014 80); --primary: oklch(76% 0.12 42); --on-primary: oklch(19% 0.05 30); --primary-container: oklch(32% 0.08 35); --on-primary-container: oklch(90% 0.06 42); --pos: oklch(74% 0.13 155); --neg: oklch(72% 0.14 28); --warn: oklch(80% 0.13 74); --info: oklch(75% 0.1 240); --habit: oklch(76% 0.11 285); --pos-soft: oklch(27% 0.05 155); --neg-soft: oklch(27% 0.055 28); --warn-soft: oklch(28% 0.05 74); --habit-soft: oklch(27% 0.045 285); --shadow-1: none; --shadow-2: none; --scrim: oklch(9% 0.006 80 / 0.62); } /* Ajustes de forma por piel (la piel también cambia la postura, no sólo el color) */ [data-skin='papel'] { --r-xs: 2px; --r-sm: 3px; --r-md: 4px; --r-lg: 5px; --r-xl: 6px; --font-display: 'Poppins', 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; } [data-skin='nocturno'] { --r-xs: 8px; --r-sm: 12px; --r-md: 18px; --r-lg: 24px; --r-xl: 32px; }