/* ============================================================ ECOMMERCE — Design system propio, aislado del sitio. GENERADO POR scripts/build-ds-styles.js — NO EDITAR. Fuente: docs/design-system/tokens/*.css (Claude Design). Todo cuelga de [data-ds="shop"], que EcommerceApp pone en mientras está montado y saca al desmontarse. Los tokens de acá comparten nombre con los de styles/tokens.css pero no siempre valor (--font-mono, --font-display, --shadow-card, --shadow-raised), así que NUNCA deben vivir en :root. No se toca styles/tokens.css, styles/components.css ni styles/buscador.css. ============================================================ */ /* ——— colors.css ——— */ [data-ds="shop"] { /* ——— Escala neutra: del negro motor al hueso de mostrador ——— */ --ink:#0E0E0E; --steel-900:#1A1A1A; --steel-800:#242424; --steel-700:#333333; --steel-500:#5A5A5A; --steel-300:#9A9A9A; --fog-200:#D9D4CB; --fog-100:#E8E2D6; --bone:#F4EFE8; --bone-soft:#FAF6EF; --paper:#FFFFFF; --ash:#6B665E; --char:#2A2620; /* ——— Marca: naranja ember ——— */ --ember:#E8472C; --ember-hot:#FF5A3C; --ember-deep:#B43419; --ember-tint:#FCE9E4; --rust:#8E2A18; /* ——— Acento secundario: latón (destacados, ofertas) ——— */ --brass:#C8924A; --brass-soft:#E0B574; --brass-tint:#F7EEDF; /* ——— Semánticos de stock / estado ——— */ --stock-yes:#4F6B2F; --stock-yes-tint:#EAF0E1; --stock-no:#8E2A18; --stock-no-tint:#F6E5E1; --stock-order:#8A6A1F; --stock-order-tint:#F7EEDF; /* ——— Alias semánticos: usar SIEMPRE estos en componentes ——— */ --bg-page:var(--bone-soft); --surface-card:var(--paper); --surface-sunken:var(--bone); --surface-inverse:var(--ink); --surface-inverse-2:var(--steel-800); --surface-accent:var(--ember); --surface-accent-soft:var(--ember-tint); --text-strong:var(--ink); --text-body:var(--char); --text-muted:var(--ash); --text-faint:var(--steel-300); --text-inverse:var(--bone-soft); --text-accent:var(--ember-deep); --text-price:var(--ink); --border-hairline:#E4DED3; --border-default:var(--fog-200); --border-strong:var(--steel-300); --border-inverse:#3A3A3A; --border-accent:var(--ember); --link:var(--ember-deep); --link-hover:var(--ember); --focus-ring:var(--ember); } /* ——— typography.css ——— */ [data-ds="shop"] { --font-display:'Oswald','Arial Narrow',Impact,sans-serif; --font-body:'DM Sans','Helvetica Neue',system-ui,sans-serif; --font-mono:'DM Mono',ui-monospace,'SFMono-Regular',Menlo,monospace; /* Display (Oswald) — títulos, precios, headers de sección. Siempre condensado. */ --display-hero-size:52px; --display-hero-lh:1.02; /* @kind font */ --display-hero-ls:-0.01em; /* @kind font */ --display-hero-weight:700; /* @kind font */ --display-xl-size:34px; --display-xl-lh:1.08; /* @kind font */ --display-xl-ls:0em; /* @kind font */ --display-xl-weight:600; /* @kind font */ --display-lg-size:26px; --display-lg-lh:1.12; /* @kind font */ --display-lg-ls:0em; /* @kind font */ --display-lg-weight:600; /* @kind font */ --display-md-size:20px; --display-md-lh:1.2; /* @kind font */ --display-md-ls:0.005em; /* @kind font */ --display-md-weight:600; /* @kind font */ --display-sm-size:16px; --display-sm-lh:1.25; /* @kind font */ --display-sm-ls:0.01em; /* @kind font */ --display-sm-weight:600; /* @kind font */ /* Body (DM Sans) */ --body-lg-size:16px; --body-lg-lh:1.55; /* @kind font */ --body-md-size:14px; --body-md-lh:1.55; /* @kind font */ --body-sm-size:13px; --body-sm-lh:1.5; /* @kind font */ --body-xs-size:12px; --body-xs-lh:1.45; /* @kind font */ /* Eyebrow / etiquetas / headers de tabla — mayúsculas trackeadas */ --eyebrow-size:11px; --eyebrow-lh:1.2; /* @kind font */ --eyebrow-ls:0.14em; /* @kind font */ --eyebrow-weight:600; /* @kind font */ --label-size:12px; --label-lh:1.2; /* @kind font */ --label-ls:0.06em; /* @kind font */ --label-weight:600; /* @kind font */ /* Códigos de pieza y medidas — monoespaciado, siempre */ --code-size:13px; --code-ls:0.02em; /* @kind font */ --weight-regular:400; /* @kind font */ --weight-medium:500; /* @kind font */ --weight-bold:700; /* @kind font */ } /* ——— spacing.css ——— */ [data-ds="shop"] { --space-0:0px; --space-1:2px; --space-2:4px; --space-3:8px; --space-4:12px; --space-5:16px; --space-6:20px; --space-7:24px; --space-8:32px; --space-9:40px; --space-10:56px; --space-11:72px; --space-12:96px; /* Estructura de página del ecommerce */ --page-max:1400px; --page-gutter:20px; --sidebar-w:250px; --grid-gap:16px; --section-gap:36px; --card-pad:14px; --control-h:38px; --control-h-sm:30px; --control-h-lg:46px; --topbar-h:46px; --navbar-h:44px; } /* ——— radii.css ——— */ [data-ds="shop"] { /* Radios chicos: la marca es industrial, casi todo es recto. */ --radius-none:0px; --radius-xs:2px; --radius-sm:3px; --radius-md:4px; --radius-lg:6px; --radius-pill:999px; --radius-card:var(--radius-md); --radius-control:var(--radius-sm); --radius-photo:var(--radius-xs); --radius-badge:var(--radius-xs); --radius-pill-stock:var(--radius-pill); } /* ——— shadows.css ——— */ [data-ds="shop"] { /* Sombras cortas y frías, nunca difusas. La jerarquía la da el borde. */ --shadow-none:none; --shadow-hairline:0 0 0 1px var(--border-hairline); --shadow-card:0 1px 2px rgba(14,14,14,.05); --shadow-card-hover:0 4px 14px rgba(14,14,14,.10); --shadow-raised:0 6px 20px rgba(14,14,14,.12); --shadow-overlay:0 18px 44px rgba(14,14,14,.22); --shadow-inset-sunken:inset 0 1px 0 rgba(14,14,14,.05); --ring-focus:0 0 0 2px var(--paper),0 0 0 4px var(--ember); } /* ——— motion.css ——— */ [data-ds="shop"] { --ease-out:cubic-bezier(.2,.8,.3,1); /* @kind other */ --ease-in-out:cubic-bezier(.4,0,.2,1); /* @kind other */ --dur-instant:80ms; /* @kind other */ --dur-fast:140ms; /* @kind other */ --dur-base:200ms; /* @kind other */ --dur-slow:320ms; /* @kind other */ --transition-control:background-color var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out); --transition-card:box-shadow var(--dur-base) var(--ease-out),border-color var(--dur-base) var(--ease-out),transform var(--dur-base) var(--ease-out); } /* ——— base.css ——— */ [data-ds="shop"] *, [data-ds="shop"] *::before, [data-ds="shop"] *::after { box-sizing:border-box } [data-ds="shop"] { -webkit-text-size-adjust:100% } [data-ds="shop"] { margin:0; background:var(--bg-page); color:var(--text-body); font-family:var(--font-body); font-size:var(--body-md-size); line-height:var(--body-md-lh); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility } [data-ds="shop"] h1, [data-ds="shop"] h2, [data-ds="shop"] h3, [data-ds="shop"] h4, [data-ds="shop"] h5, [data-ds="shop"] h6 { font-family:var(--font-display); font-weight:var(--display-md-weight); color:var(--text-strong); margin:0; text-wrap:balance } [data-ds="shop"] p { margin:0; text-wrap:pretty } [data-ds="shop"] a { color:var(--link); text-decoration:none } [data-ds="shop"] a:hover { color:var(--link-hover); text-decoration:underline; text-underline-offset:2px } [data-ds="shop"] button, [data-ds="shop"] input, [data-ds="shop"] select, [data-ds="shop"] textarea { font:inherit; color:inherit } [data-ds="shop"] :focus-visible { outline:2px solid var(--focus-ring); outline-offset:2px } [data-ds="shop"] ::selection { background:var(--ember); color:#fff } [data-ds="shop"] img { max-width:100% } [data-ds="shop"] code, [data-ds="shop"] kbd, [data-ds="shop"] samp { font-family:var(--font-mono); font-size:var(--code-size) } [data-ds="shop"] .ch-eyebrow { font-family:var(--font-body); font-size:var(--eyebrow-size); line-height:var(--eyebrow-lh); letter-spacing:var(--eyebrow-ls); font-weight:var(--eyebrow-weight); text-transform:uppercase; color:var(--text-muted) } [data-ds="shop"] .ch-code { font-family:var(--font-mono); font-size:var(--code-size); letter-spacing:var(--code-ls) } /* ——— Cierre de aislamiento ——— */ /* base.css original no resetea márgenes más allá de body/h1-h6/p: cuenta con que la página traiga su propio reset. styles/tokens.css ya hace *{margin:0;padding:0} de forma global, así que las listas y tablas del ecommerce quedan cubiertas. */ [data-ds="shop"] { min-height: 100vh; }