/* ============================================================================ * iShop · css/01-tokens.css — el sistema de diseño * ---------------------------------------------------------------------------- * IDEA RECTORA: la interfaz como cristal flotando sobre un gradiente vivo. * Capas translúcidas, esquinas muy blandas, muelles reales y una isla dinámica * que muta según lo que esté pasando. * * Aquí viven TODOS los valores del sistema. Ningún otro archivo escribe un * color, una medida o una duración literal: todo se deriva de estas variables. * Cambiar la identidad visual del producto se hace en este archivo y en ningún * otro. * * Las técnicas de mayor riesgo — backdrop-filter, @property, @starting-style y * el easing linear() — tienen su degradación declarada en 09-adaptativo.css. * ========================================================================== */ @layer reset, tokens, base, layout, componentes, secciones, movimiento, adaptativo; @layer tokens { @property --dev-metal-a { syntax: ''; inherits: true; initial-value: #e6e2f5; } @property --dev-metal-b { syntax: ''; inherits: true; initial-value: #7a6f9e; } @property --dev-metal-c { syntax: ''; inherits: true; initial-value: #c3bbdf; } @property --avance { syntax: ''; inherits: false; initial-value: 0; } @property --mx { syntax: ''; inherits: false; initial-value: 50%; } @property --my { syntax: ''; inherits: false; initial-value: 50%; } @property --giro { syntax: ''; inherits: false; initial-value: 0deg; } :root { color-scheme: dark; /* --- Superficies: TRANSLÚCIDAS. Es lo que define la dirección. ------- * El fondo real es la malla de gradientes de 02-base.css; estas capas * solo la velan en distintos grados. * ------------------------------------------------------------------- */ --bg: #12101c; --surface-1: rgb(255 255 255 / 0.10); --surface-2: rgb(255 255 255 / 0.16); --surface-3: rgb(255 255 255 / 0.24); --overlay: rgb(10 8 18 / 0.55); /* --- Tinta ------------------------------------------------------------ */ --ink: #ffffff; --ink-2: rgb(255 255 255 / 0.72); --ink-3: rgb(255 255 255 / 0.48); --ink-inv: #12101c; /* --- Líneas: realces de vidrio, no bordes -------------------------- */ --line: rgb(255 255 255 / 0.16); --line-strong: rgb(255 255 255 / 0.30); /* --- Acento: magenta luminoso ---------------------------------------- */ --accent: oklch(0.74 0.17 320); --accent-ink: #12101c; --accent-soft: color-mix(in oklab, var(--accent) 22%, transparent); /* --- Tonos: saturados pero claros, para leer sobre vidrio ----------- */ --ok: oklch(0.80 0.15 158); --warn: oklch(0.83 0.15 78); --danger: oklch(0.70 0.19 20); --progress: oklch(0.78 0.14 220); --idle: rgb(255 255 255 / 0.55); --muted: rgb(255 255 255 / 0.34); /* --- Radios: muy blandos. Es lo que da el carácter táctil. ----------- */ --radius-0: 0; --radius-1: 12px; --radius-2: 20px; --radius-3: 28px; --radius-pill: 999px; /* --- Espaciado -------------------------------------------------------- */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; --space-7: 3rem; --space-8: 4.5rem; --space-9: 6.5rem; /* --- Tipografía ------------------------------------------------------- * Plus Jakarta Sans: geométrica, redonda y de altura de x alta, que es lo * que pide una interfaz de vidrio. Respaldo: Segoe UI Variable Text, cuyos * remates blandos caen más cerca que Inter. * ------------------------------------------------------------------- */ --font-display: 'Plus Jakarta Sans', 'Segoe UI Variable Display', 'Segoe UI', system-ui, -apple-system, sans-serif; --font-text: 'Plus Jakarta Sans', 'Segoe UI Variable Text', 'Segoe UI', system-ui, -apple-system, sans-serif; --font-mono: 'DM Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace; --step--1: clamp(0.75rem, 0.72rem + 0.14vw, 0.8125rem); --step-0: clamp(0.9375rem, 0.9rem + 0.19vw, 1.0625rem); --step-1: clamp(1.125rem, 1.05rem + 0.37vw, 1.3125rem); --step-2: clamp(1.375rem, 1.24rem + 0.67vw, 1.75rem); --step-3: clamp(1.75rem, 1.5rem + 1.25vw, 2.5rem); --step-4: clamp(2.25rem, 1.79rem + 2.3vw, 3.5rem); --step-5: clamp(2.875rem, 2.1rem + 3.9vw, 5rem); --step-6: clamp(3.5rem, 2.3rem + 6vw, 7.25rem); --step-7: clamp(4.25rem, 1.8rem + 12vw, 11rem); --leading-tight: 1; --leading-text: 1.6; --tracking-display: -0.028em; --tracking-text: -0.004em; /* --- Profundidad: sombra difusa + realce interior. El realce interior * es lo que hace que una capa parezca vidrio y no plástico. ------ */ --shadow-1: inset 0 1px 0 rgb(255 255 255 / 0.22), 0 2px 8px rgb(0 0 0 / 0.18); --shadow-2: inset 0 1px 0 rgb(255 255 255 / 0.30), 0 8px 32px -8px rgb(0 0 0 / 0.42); --shadow-3: inset 0 1px 0 rgb(255 255 255 / 0.38), 0 24px 64px -16px rgb(0 0 0 / 0.55); /* --- Movimiento: muelles de verdad ----------------------------------- */ --dur-1: 160ms; --dur-2: 300ms; --dur-3: 520ms; --dur-4: 900ms; --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); /* Muelle con sobreimpulso: es lo que da la sensación táctil de iOS, y no necesita ni una línea de JavaScript. */ --ease-spring: linear( 0, 0.006, 0.025 2.8%, 0.101 6.1%, 0.539 18.9%, 0.721 25.3%, 0.849 31.5%, 0.937 38.1%, 0.968 41.8%, 0.991 45.7%, 1.006 50.1%, 1.015 55%, 1.017 63.9%, 1.001 87.3%, 1 ); /* --- Disposición: columna «app» centrada ----------------------------- */ --gutter: clamp(1rem, 4vw, 3rem); --measure: 62ch; --grid-cols: 12; --dev-glass: #0a0812; /* --- Ajustes finos de la interfaz (prefijo --ui-) ------------------- */ --ui-blur: 28px; --ui-satura: 180%; --ui-col-app: 30rem; /* la columna «app» centrada */ --ui-ancho-max: 82rem; --ui-alto-cabecera: 3.5rem; --ui-isla-alto: 2.75rem; } /* --- Traducción de tono a color --------------------------------------- */ [data-tono='ok'] { --tono: var(--ok); } [data-tono='warn'] { --tono: var(--warn); } [data-tono='danger'] { --tono: var(--danger); } [data-tono='progress'] { --tono: var(--progress); } [data-tono='idle'] { --tono: var(--idle); } [data-tono='muted'] { --tono: var(--muted); } }