/* ============================================================ DONADÓN · design tokens Único lugar donde se declaran colores, tipografías y escalas. Ningún otro archivo declara color crudo. PIEL — sale del logo JCD de donadon.com.ar, no de una elección estética. Dos colores de marca y nada más (ver brand-spec.md): · cobre #D34B1E → --accent · el óvalo y el filete del marco · celeste #66CCFF → --water · las dos bandas horizontales El cobre es acción; el celeste es agua y sólo tiñe arte, tiles de rubro y avisos. Nunca al revés. Para adoptar los lineamientos de basement-mcp: reemplazar los valores de este archivo. UNIDADES — regla del sistema, se cumple en todo el proyecto. La BASE es 16px: el tamaño por defecto del navegador. No se fija font-size en , así el usuario puede subirlo desde su config y todo escala. Por eso 1em = 1rem = 16px, y --fs-body es 1em. · font-size → em (relativo al padre; Poppins y Open Sans) · TODO valor lleva un decimal como máximo. Las únicas cifras con más precisión son letter-spacing (milésimas de em, si se redondean se rompen) y los componentes de color en oklch. · medidas → rem (base 16: espaciado, radios, anchos, --tap) · line-height → sin unidad · breakpoints → em (en media query, em y rem valen 16px fijos) · letter-spacing → em (tiene que escalar con la tipografía) Únicas excepciones en px, a propósito: · trazos de 1 a 2px (border, outline): en rem se ven borrosos · sombras (--shadow-*) y blur del backdrop: son efectos, no medidas Nunca fijar font-size en : rompe el zoom del navegador. ============================================================ */ :root { color-scheme: light; /* ══ 1 · CAPA BASEMENT ═════════════════════════════════════ Nombres canónicos que devuelve basement-mcp (get_color_token). El port a Angular consume ESTOS; los alias de la sección 2 sólo existen para no reescribir las 600 líneas de componentes. Qué se tomó del MCP tal cual y qué no: · neutros y estados → valor literal de basement (son sistema) · primary y secondary → PISADOS con la marca Donadón. Los de basement (#1976d2 azul, #00897b teal) son los del template, no los del cliente; el logo JCD manda acá. ═════════════════════════════════════════════════════════════ */ /* -- marca (pisada: valores del logo JCD, no los del template) -- */ --basement-primary: oklch(55.5% 0.175 45); /* #D34B1E cobre */ --basement-on-primary: #ffffff; /* = basement */ --basement-secondary: oklch(65% 0.115 233); /* #66CCFF celeste*/ --basement-on-secondary: oklch(20% 0.02 233); /* -- estados: valor literal de basement ------------------------ */ --basement-success: #2e7d32; --basement-warning: #f57c00; --basement-error: #c62828; /* -- superficies y tinta: valor literal de basement ------------ */ --theme-bg: #f5f5f5; --theme-bg-surface: #fafafa; --theme-bg-elevated: #ffffff; --theme-text: rgba(0, 0, 0, 0.87); --theme-border: #e0e0e0; /* El MCP nombra estos dos pero no publica su valor: se derivan del texto principal para no inventar un color de paleta. */ --theme-text-secondary: rgba(0, 0, 0, 0.60); --theme-text-disabled: rgba(0, 0, 0, 0.38); /* ══ 2 · ALIAS DEL PROTOTIPO ═══════════════════════════════════ Cada alias apunta a la capa de arriba. Un componente nunca lee un valor: lee un rol. Cambiar de piel = cambiar la sección 1. ═════════════════════════════════════════════════════════════ */ /* ---- superficies ---------------------------------------- */ --bg: var(--theme-bg); --surface: var(--theme-bg-elevated); --surface-2: var(--theme-bg-surface); --surface-sunk: color-mix(in oklch, var(--theme-bg) 92%, var(--theme-text)); /* franjas oscuras (hero, pie): basement no publica un token de superficie invertida, así que se deriva de la tinta. */ --bg-deep: oklch(23% 0.022 258); /* ---- tinta ----------------------------------------------- */ --fg: var(--theme-text); --muted: var(--theme-text-secondary); --fg-invert: oklch(97% 0.004 250); --muted-invert: oklch(76% 0.012 250); /* ---- trazos ---------------------------------------------- */ --border: var(--theme-border); --border-strong: color-mix(in oklch, var(--theme-border) 60%, var(--theme-text)); --border-invert: oklch(34% 0.018 258); /* ---- acción ---------------------------------------------- */ --accent: var(--basement-primary); --accent-press: color-mix(in oklch, var(--basement-primary) 82%, black); --accent-soft: color-mix(in oklch, var(--basement-primary) 12%, transparent); --accent-ink: color-mix(in oklch, var(--basement-primary) 78%, black); --on-accent: var(--basement-on-primary); --link: oklch(47% 0.120 250); /* acento de dominio: el celeste de las bandas del logo. Sólo en arte de producto, tiles de rubro y notas informativas — nunca en acciones. */ --water: var(--basement-secondary); --water-soft: color-mix(in oklch, var(--water) 10%, transparent); /* Fondo detrás de una foto de producto. Las fotos del catálogo vienen recortadas sobre blanco, así que este token se mantiene claro también en tema oscuro: si no, la foto queda flotando en un rectángulo blanco. */ --photo-bg: var(--theme-bg-elevated); /* ---- estados (stock, pedidos, validación) ---------------- */ --ok: var(--basement-success); --ok-soft: color-mix(in oklch, var(--ok) 13%, transparent); --warn: var(--basement-warning); --warn-soft: color-mix(in oklch, var(--warn) 16%, transparent); --danger: var(--basement-error); --danger-soft: color-mix(in oklch, var(--danger) 12%, transparent); --info: oklch(52% 0.110 245); --info-soft: color-mix(in oklch, var(--info) 12%, transparent); /* ---- derivados ------------------------------------------- */ --fg-soft: color-mix(in oklch, var(--fg) 5%, transparent); --fg-softer: color-mix(in oklch, var(--fg) 2.5%, transparent); --shadow-sm: 0 1px 2px color-mix(in oklch, var(--fg) 8%, transparent); --shadow-md: 0 6px 20px color-mix(in oklch, var(--fg) 10%, transparent); --shadow-lg: 0 18px 48px color-mix(in oklch, var(--fg) 16%, transparent); /* ---- tipografía ------------------------------------------ */ --font-display: 'Poppins', 'Montserrat', 'Avenir Next', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; --font-body: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; --font-mono: ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, monospace; /* ---- escala tipográfica (fluida 360 → 1920) -------------- Base 16px = el tamaño por defecto del navegador. 1em = 16px. El px al lado de cada línea es sólo referencia de lectura. */ --fs-body: 1em; /* 16 */ --fs-sm: 0.9em; /* 14,4 */ --fs-meta: 0.8em; /* 12,8 */ --fs-h3: 1.1em; /* 17,6 */ --fs-lead: clamp(1em, 1.3vw, 1.1em); /* 16 → 17,6 */ --fs-h2: clamp(1.4em, 2.4vw, 1.8em); /* 22,4 → 28,8 */ --fs-h1: clamp(1.7em, 3.6vw, 2.5em); /* 27,2 → 40 */ --fs-display: clamp(2.1em, 5.2vw, 3.8em); /* 33,6 → 60,8 */ /* ---- espaciado (escala de 4, redondeada a 1 decimal) ------ */ --sp-1: 0.2rem; --sp-2: 0.5rem; --sp-3: 0.8rem; --sp-4: 1rem; --sp-5: 1.5rem; --sp-6: 2rem; --sp-7: 3rem; --sp-8: 4rem; --sp-9: 6rem; /* ---- layout ---------------------------------------------- */ --container: 77.5rem; --container-narrow: 53.8rem; --gutter: clamp(1rem, 4vw, 2.5rem); --header-h: 4rem; /* ---- forma ----------------------------------------------- */ --radius-xs: 0.4rem; --radius: 0.6rem; --radius-lg: 1rem; --radius-xl: 1.4rem; --radius-pill: 62.5rem; /* píldora: cualquier valor grande */ /* ---- movimiento ------------------------------------------ */ --ease: cubic-bezier(0.2, 0.7, 0.3, 1); --dur-fast: 120ms; --dur: 200ms; --dur-slow: 380ms; /* ---- táctil ---------------------------------------------- */ --tap: 2.8rem; } /* ============================================================ Tema oscuro Sólo se redefinen superficies, tinta, trazos y estados: la escala, la tipografía y la forma son las mismas. Los tokens "invert" siguen significando "sobre panel oscuro", por eso casi no cambian; el que se da vuelta es --on-accent. ============================================================ */ [data-theme='dark'] { color-scheme: dark; /* basement-mcp publica un solo juego de valores (claro). El oscuro es propio: se redefine la CAPA 1 y los alias de la CAPA 2 siguen apuntando al mismo rol, así que ningún componente se entera. */ --basement-primary: oklch(68% 0.155 48); --basement-on-primary: oklch(17% 0.020 45); --basement-secondary: oklch(74% 0.105 233); --basement-success: oklch(74% 0.150 155); --basement-warning: oklch(80% 0.140 78); --basement-error: oklch(69% 0.175 25); --theme-bg: oklch(19.5% 0.014 258); --theme-bg-surface: oklch(27% 0.016 258); --theme-bg-elevated: oklch(23.5% 0.015 258); --theme-text: oklch(95.5% 0.004 250); --theme-text-secondary: oklch(69% 0.013 250); --theme-text-disabled: oklch(55% 0.012 250); --theme-border: oklch(31% 0.014 258); --bg-deep: oklch(14.5% 0.012 258); --surface-sunk: oklch(17% 0.013 258); --fg-invert: oklch(97% 0.004 250); --muted-invert: oklch(72% 0.012 250); --border-strong: oklch(42% 0.016 258); --border-invert: oklch(30% 0.014 258); --accent-press: oklch(75% 0.135 48); --accent-ink: oklch(78% 0.115 48); --link: oklch(74% 0.105 250); --info: oklch(74% 0.105 245); --photo-bg: oklch(95% 0.004 250); --shadow-sm: 0 1px 2px oklch(0% 0 0 / 0.45); --shadow-md: 0 6px 20px oklch(0% 0 0 / 0.5); --shadow-lg: 0 18px 48px oklch(0% 0 0 / 0.6); } @media (prefers-reduced-motion: reduce) { :root { --dur-fast: 1ms; --dur: 1ms; --dur-slow: 1ms; } }