/* ===================================================================== Celltek tienda · TOKENS Único lugar donde se definen colores, tipografía, radios y ritmo. Los demás CSS solo consumen estas variables. temas.css (generado desde content/temas.json) las redefine por paleta (data-palette) y por par tipográfico (data-font). El modo oscuro entra por el sistema o por data-theme="dark" | "light" en . data-radio cambia la geometría. ===================================================================== */ /* Fuentes propias (sin depender de Google en producción) */ @font-face { font-family: "Outfit"; font-style: normal; font-weight: 300 900; font-display: swap; src: url("../fonts/outfit-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Nunito Sans"; font-style: normal; font-weight: 200 1000; font-display: swap; src: url("../fonts/nunito-sans-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Nunito Sans"; font-style: italic; font-weight: 200 1000; font-display: swap; src: url("../fonts/nunito-sans-latin-italic.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } :root { color-scheme: light; /* Superficies (paleta Celltek, modo claro) */ --bg: #f5f7fa; --bg2: #eceff4; --surf: #ffffff; --surf2: #f7f9fc; --line: rgba(16, 20, 24, .10); --line2: rgba(16, 20, 24, .20); /* Texto */ --text: #101418; --muted: #4f5b67; --dim: #8a95a1; /* Acento: el azul Celltek */ --accent: #1f6fe0; --accent-2: #3b86f0; --accent-deep: #144ea6; --on-accent: #ffffff; --accent-soft: rgba(31, 111, 224, .11); --accent-ring: rgba(31, 111, 224, .28); /* Semánticos (iguales en todas las paletas) */ --ok: #159a5c; --ok-soft: rgba(21, 154, 92, .12); --warn: #d98a06; --warn-soft: rgba(217, 138, 6, .14); --bad: #d63b3b; --bad-soft: rgba(214, 59, 59, .12); --oferta: #e0245e; --on-oferta: #ffffff; /* Materiales */ --glass: rgba(245, 247, 250, .62); --glass-solid: rgba(245, 247, 250, .86); --sheen: .28; --bezel: rgba(16, 20, 24, .04); --shadow: 0 24px 60px -34px rgba(16, 20, 24, .30); --shadow-sm: 0 8px 22px -14px rgba(16, 20, 24, .22); --inset-hi: inset 0 1px 0 rgba(255, 255, 255, .85); --grain-o: .03; --tile: #ffffff; /* baldosa blanca detrás de las fotos de producto */ /* Logo: qué versión se muestra */ --logo-light: block; --logo-dark: none; /* Zonas (una paleta puede pintarlas distinto) */ --nav-bg: var(--glass); --nav-bg-solid: var(--glass-solid); --nav-text: var(--text); --nav-muted: var(--muted); --nav-line: var(--line); --nav-field: var(--surf); --nav-field-text: var(--text); --nav-field-ph: var(--dim); --nav-solid-min: 0; --nav-oferta: var(--oferta); --nav-logo-light: var(--logo-light); --nav-logo-dark: var(--logo-dark); --band-bg: var(--bg2); --cta-bg: var(--bg2); --cta-text: var(--text); --cta-muted: var(--muted); --cta-line: var(--line2); --footer-bg: #0f1720; --footer-text: #f2f5f8; --footer-muted: #9fb0bf; --footer-dim: rgba(242, 245, 248, .5); --footer-line: rgba(242, 245, 248, .12); --footer-logo-light: none; --footer-logo-dark: block; /* Tipografía (el selector de fuentes cambia solo estos tokens) */ --font: "Nunito Sans", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif; --font-display: "Outfit", system-ui, -apple-system, "Segoe UI", sans-serif; --display-wght: 700; --display-wdth: 100; --display-tt: none; --display-ls: -.022em; --display-lh: 1.02; --display-scale: 1; --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace; /* multiplicadores por rol (los define el panel; 1 = tamaño original) */ --k-display: 1; --k-h3: 1; --k-lead: 1; --k-body: 1; --k-eyebrow: 1; --k-btn: 1; --k-precio: 1; --fs-body: calc(16.5px * var(--k-body)); --fs-display: calc(clamp(2.2rem, 4.6vw, 3.9rem) * var(--display-scale) * var(--k-display)); --fs-hero: calc(clamp(2.5rem, 5.6vw, 5rem) * var(--display-scale) * var(--k-display)); --fs-h3: calc(clamp(1.05rem, 1.4vw, 1.25rem) * var(--k-h3)); --fs-lead: calc(clamp(1.02rem, 1.3vw, 1.2rem) * var(--k-lead)); --fs-precio: calc(1.25rem * var(--k-precio)); /* Geometría y ritmo (data-radio="recto|suave|redondo") */ --r: 18px; /* tarjetas, paneles */ --r-in: 12px; /* elementos dentro de tarjetas, fotos */ --r-btn: 999px; /* botones */ --r-input: 12px; /* campos */ --gutter: clamp(16px, 3.4vw, 48px); --max: 1360px; --sec: clamp(56px, 7vw, 104px); --ease: cubic-bezier(.16, 1, .3, 1); --nav-h: 68px; --cats-h: 44px; } :root[data-radio="recto"] { --r: 6px; --r-in: 4px; --r-btn: 8px; --r-input: 6px; } :root[data-radio="redondo"] { --r: 28px; --r-in: 18px; --r-btn: 999px; --r-input: 16px; } /* Oscuro por preferencia del sistema (salvo elección explícita de claro) */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --bg: #0c1016; --bg2: #121820; --surf: #171e28; --surf2: #1e2733; --line: rgba(238, 242, 246, .10); --line2: rgba(238, 242, 246, .18); --text: #eef2f6; --muted: #a3adb8; --dim: #6b7682; --accent: #4d9bff; --accent-2: #6faeff; --accent-deep: #1f6fe0; --accent-soft: rgba(77, 155, 255, .16); --accent-ring: rgba(77, 155, 255, .28); --ok: #2fd39b; --warn: #f2b134; --bad: #ff6b6b; --oferta: #ff5c8d; --glass: rgba(12, 16, 22, .55); --glass-solid: rgba(12, 16, 22, .82); --sheen: .10; --bezel: rgba(238, 242, 246, .05); --shadow: 0 30px 70px -36px rgba(0, 0, 0, .85); --shadow-sm: 0 8px 24px -14px rgba(0, 0, 0, .7); --inset-hi: inset 0 1px 0 rgba(255, 255, 255, .05); --grain-o: .05; --logo-light: none; --logo-dark: block; --footer-bg: #080b10; --footer-text: #eef2f6; --footer-muted: #8b98a6; --footer-dim: rgba(238, 242, 246, .5); --footer-line: rgba(238, 242, 246, .12); } } /* Oscuro por interruptor */ :root[data-theme="dark"] { color-scheme: dark; --bg: #0c1016; --bg2: #121820; --surf: #171e28; --surf2: #1e2733; --line: rgba(238, 242, 246, .10); --line2: rgba(238, 242, 246, .18); --text: #eef2f6; --muted: #a3adb8; --dim: #6b7682; --accent: #4d9bff; --accent-2: #6faeff; --accent-deep: #1f6fe0; --accent-soft: rgba(77, 155, 255, .16); --accent-ring: rgba(77, 155, 255, .28); --ok: #2fd39b; --warn: #f2b134; --bad: #ff6b6b; --oferta: #ff5c8d; --glass: rgba(12, 16, 22, .55); --glass-solid: rgba(12, 16, 22, .82); --sheen: .10; --bezel: rgba(238, 242, 246, .05); --shadow: 0 30px 70px -36px rgba(0, 0, 0, .85); --shadow-sm: 0 8px 24px -14px rgba(0, 0, 0, .7); --inset-hi: inset 0 1px 0 rgba(255, 255, 255, .05); --grain-o: .05; --logo-light: none; --logo-dark: block; --footer-bg: #080b10; --footer-text: #eef2f6; --footer-muted: #8b98a6; --footer-dim: rgba(238, 242, 246, .5); --footer-line: rgba(238, 242, 246, .12); }