/* ============================================================================ mowomo · Design System — Tokens canónicos (v3 · "mowomo × Nord") ---------------------------------------------------------------------------- Evolución del DS austero hacia un sistema funcional/semántico inspirado en Nord (nordhealth.design): tokens por rol (surface/text/accent/border/status), escala neutra refinada, acento + estados, tema claro y oscuro, tipografía con carácter (display grotesk + sans de producto + mono). Se conserva la IDENTIDAD mowomo: tinta #0F1923, numeración 01/02, whitespace generoso, sombras tinte-ink, sin glassmorphism/neumorfismo/ruido. Uso: @import o copia este archivo. Variables públicas: --mwm-* / --font-* / --fs-* / --lh-* / --s-* / --r-* / --shadow-* / --ease-* / --dur-*. Tema oscuro: (o [data-theme="dark"] en cualquier raíz). Fuentes (Google Fonts): Hanken Grotesk (display) · Inter (producto/UI) · IBM Plex Mono (datos/código) ============================================================================ */ :root { /* ---- Rampa neutra (fría, derivada de la tinta) ------------------------- */ --mwm-neutral-0: #FFFFFF; --mwm-neutral-50: #F6F8FA; --mwm-neutral-100: #EDF0F4; --mwm-neutral-200: #DFE4EB; --mwm-neutral-300: #CBD2DB; /* hairline estructural (ex #CCCCCC) */ --mwm-neutral-400: #A6B0BD; --mwm-neutral-500: #7C8794; /* meta (ex #999999) */ --mwm-neutral-600: #586472; --mwm-neutral-700: #3A444F; --mwm-neutral-800: #1E2A35; --mwm-neutral-900: #0F1923; /* tinta mowomo */ --mwm-neutral-950: #080E14; /* ---- Acento (azul mowomo, ahora con escala) ---------------------------- */ --mwm-accent-50: #ECF3FC; --mwm-accent-100: #D6E6F9; --mwm-accent-300: #8FBDED; --mwm-accent-500: #0563C1; /* base de marca */ --mwm-accent-600: #0A56A6; --mwm-accent-700: #07406F; /* ---- Estados (matices sobrios, no chillones) --------------------------- */ --mwm-success-500: #1E8E5A; --mwm-success-weak: #E4F4EC; --mwm-warning-500: #B26A00; --mwm-warning-weak: #FAEFD8; --mwm-danger-500: #C2463B; --mwm-danger-weak: #FAE7E5; --mwm-info-500: #2D6FB8; --mwm-info-weak: #E7F0FB; /* ---- Tokens SEMÁNTICOS · tema claro (por defecto) ---------------------- */ --mwm-color-surface: var(--mwm-neutral-0); --mwm-color-surface-sunken: var(--mwm-neutral-50); --mwm-color-surface-raised: var(--mwm-neutral-0); --mwm-color-surface-inverse:var(--mwm-neutral-900); --mwm-color-nav: var(--mwm-neutral-50); /* barras/sidebars */ --mwm-color-text: var(--mwm-neutral-900); --mwm-color-text-weak: var(--mwm-neutral-600); --mwm-color-text-weaker: var(--mwm-neutral-500); --mwm-color-text-on-accent: #FFFFFF; --mwm-color-text-on-inverse:var(--mwm-neutral-50); --mwm-color-border: var(--mwm-neutral-200); --mwm-color-border-strong: var(--mwm-neutral-300); --mwm-color-accent: var(--mwm-accent-500); --mwm-color-accent-hover: var(--mwm-accent-600); --mwm-color-accent-weak: var(--mwm-accent-50); --mwm-color-link: var(--mwm-accent-500); --mwm-color-focus: var(--mwm-accent-500); --mwm-color-success: var(--mwm-success-500); --mwm-color-success-weak: var(--mwm-success-weak); --mwm-color-warning: var(--mwm-warning-500); --mwm-color-warning-weak: var(--mwm-warning-weak); --mwm-color-danger: var(--mwm-danger-500); --mwm-color-danger-weak: var(--mwm-danger-weak); --mwm-color-info: var(--mwm-info-500); --mwm-color-info-weak: var(--mwm-info-weak); /* ---- Aliases retro-compatibles (artefactos previos) -------------------- */ --mwm-ink: var(--mwm-color-text); --mwm-white: var(--mwm-color-surface); --mwm-surface-2: var(--mwm-color-surface-sunken); --mwm-surface-3: var(--mwm-neutral-100); --mwm-border: var(--mwm-color-border); --mwm-meta: var(--mwm-color-text-weaker); --mwm-link: var(--mwm-color-link); /* ---- Tipografía -------------------------------------------------------- */ --font-display: "Hanken Grotesk", "Inter", system-ui, sans-serif; /* marca/titulares */ --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; /* producto/cuerpo */ --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", monospace; /* datos/código */ --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-black: 800; /* Escala de tipo (armónica con el espaciado). rem base 16px. */ --fs-xxs: 0.6875rem; /* 11 */ --fs-xs: 0.75rem; /* 12 */ --fs-s: 0.8125rem; /* 13 */ --fs-body: 1rem; /* 16 */ --fs-m: 1rem; /* alias */ --fs-l: 1.125rem; /* 18 */ --fs-xl: 1.375rem; /* 22 */ --fs-h3: 1.75rem; /* 28 */ --fs-h2: 2.25rem; /* 36 */ --fs-h1: 3rem; /* 48 */ --fs-hero: 4rem; /* 64 */ --lh-tight: 1.1; --lh-snug: 1.28; --lh-base: 1.55; --lh-relaxed: 1.72; --ls-tight: -0.02em; --ls-normal: 0; --ls-wide: 0.08em; --ls-caps: 0.18em; /* ---- Espaciado (8-pt; armónico con el tipo) ---------------------------- */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-6: 24px; --s-8: 32px; --s-12: 48px; --s-16: 64px; --s-24: 96px; --s-32: 128px; /* ---- Radio (pequeño = identidad; pills solo en chips) ------------------ */ --r-xs: 4px; --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-pill: 999px; /* ---- Elevación (siempre tinte-ink, nunca color) ------------------------ */ --shadow-sm: 0 1px 2px rgba(15,25,35,.06), 0 1px 3px rgba(15,25,35,.10); --shadow-md: 0 4px 10px rgba(15,25,35,.08), 0 2px 4px rgba(15,25,35,.06); --shadow-lg: 0 14px 34px rgba(15,25,35,.14); --shadow-xl: 0 26px 64px rgba(15,25,35,.20); /* ---- Movimiento -------------------------------------------------------- */ --ease-out: cubic-bezier(.16,.84,.34,1); --ease-in-out: cubic-bezier(.65,.05,.36,1); --dur-fast: 120ms; --dur-base: 200ms; --dur-slow: 360ms; --mwm-focus-ring: 0 0 0 3px var(--mwm-accent-100); } /* ============================================================================ TEMA OSCURO · / [data-theme="dark"] Solo se redefinen los tokens semánticos y la elevación; el resto se hereda. ============================================================================ */ [data-theme="dark"] { --mwm-color-surface: var(--mwm-neutral-950); --mwm-color-surface-sunken: #05090D; --mwm-color-surface-raised: var(--mwm-neutral-800); --mwm-color-surface-inverse:var(--mwm-neutral-50); --mwm-color-nav: var(--mwm-neutral-900); --mwm-color-text: #EAF0F6; --mwm-color-text-weak: var(--mwm-neutral-400); --mwm-color-text-weaker: var(--mwm-neutral-500); --mwm-color-text-on-accent: #FFFFFF; --mwm-color-text-on-inverse:var(--mwm-neutral-900); --mwm-color-border: rgba(255,255,255,.10); --mwm-color-border-strong: rgba(255,255,255,.20); --mwm-color-accent: #3D8BE0; --mwm-color-accent-hover: #5C9FE8; --mwm-color-accent-weak: rgba(61,139,224,.16); --mwm-color-link: #6FB0F0; --mwm-color-focus: #3D8BE0; --mwm-color-success: #45B07C; --mwm-color-success-weak: rgba(69,176,124,.16); --mwm-color-warning: #D69331; --mwm-color-warning-weak: rgba(214,147,49,.16); --mwm-color-danger: #E0695E; --mwm-color-danger-weak: rgba(224,105,94,.16); --mwm-color-info: #5C9FE8; --mwm-color-info-weak: rgba(92,159,232,.16); --shadow-sm: 0 1px 2px rgba(0,0,0,.4); --shadow-md: 0 6px 16px rgba(0,0,0,.5); --shadow-lg: 0 18px 40px rgba(0,0,0,.6); --shadow-xl: 0 30px 70px rgba(0,0,0,.7); --mwm-focus-ring: 0 0 0 3px rgba(61,139,224,.32); } /* Respeta la preferencia del sistema si no se fija data-theme explícito. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --mwm-color-surface:#080E14; --mwm-color-surface-sunken:#05090D; --mwm-color-surface-raised:#1E2A35; --mwm-color-nav:#0F1923; --mwm-color-text:#EAF0F6; --mwm-color-text-weak:#A6B0BD; --mwm-color-text-weaker:#7C8794; --mwm-color-border:rgba(255,255,255,.10); --mwm-color-border-strong:rgba(255,255,255,.20); --mwm-color-accent:#3D8BE0; --mwm-color-accent-hover:#5C9FE8; --mwm-color-accent-weak:rgba(61,139,224,.16); --mwm-color-link:#6FB0F0; --shadow-sm:0 1px 2px rgba(0,0,0,.4); --shadow-md:0 6px 16px rgba(0,0,0,.5); --shadow-lg:0 18px 40px rgba(0,0,0,.6); --shadow-xl:0 30px 70px rgba(0,0,0,.7); } }