/* ============================================================================= OUTDOOR HUB — LANDING · TOKENS ----------------------------------------------------------------------------- Subconjunto de frontend/src/shared/theme/tokens.css, fijado a la identidad neutra de OutdoorHub (--primary-h/s/l del color de marca por defecto) y al modo oscuro. Esta página institucional no tiene cuenta que la personalice, así que el color no cambia en runtime — pero sigue derivándose por fórmula, nunca como literales sueltos en styles.css. --tint-dark sube respecto del valor por defecto de la app (0.25 → 0.5): esta superficie persuade, no opera, y el brief pide que el color de marca cargue la página a escala de sección, no solo en acentos. ========================================================================== */ :root { --primary-h: 274; --primary-s: 69%; --primary-l: 53%; --primary: #9032da; --primary-contrast: hsl(274 25% 98%); --primary-text-dark: hsl(274 69% 74%); --tint-dark: 0.5; --depth: 1.1; --radius-scale: 1; --font-body: "Noto Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --font-display: "Spline Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; /* -- Rampa del color de marca (modo oscuro) ------------------------------ */ --primary-400: hsl(var(--primary-h) var(--primary-s) 63%); --primary-500: var(--primary); --primary-600: hsl(var(--primary-h) var(--primary-s) calc(var(--primary-l) * 0.8)); --primary-700: hsl(var(--primary-h) var(--primary-s) calc(var(--primary-l) * 0.64)); --primary-text: var(--primary-text-dark); --accent: hsl(calc(var(--primary-h) + 150) calc(var(--primary-s) * 0.9) 64%); /* -- Neutros cromáticos (grafito con matiz de marca) --------------------- */ --bg-app: hsl(var(--primary-h) calc(var(--primary-s) * 0.3 * var(--tint-dark)) 7%); --surface: hsl(var(--primary-h) calc(var(--primary-s) * 0.28 * var(--tint-dark)) 11.5%); --surface-raised: hsl(var(--primary-h) calc(var(--primary-s) * 0.26 * var(--tint-dark)) 15%); --surface-sunken: hsl(var(--primary-h) calc(var(--primary-s) * 0.34 * var(--tint-dark)) 5%); --border-soft: hsl(var(--primary-h) calc(var(--primary-s) * 0.4 * var(--tint-dark)) 100% / 0.09); --hairline: hsl(var(--primary-h) calc(var(--primary-s) * 0.4 * var(--tint-dark)) 100% / 0.08); --text-main: hsl(var(--primary-h) calc(var(--primary-s) * 0.18 * var(--tint-dark)) 97%); --text-muted: hsl(var(--primary-h) calc(var(--primary-s) * 0.16 * var(--tint-dark)) 70%); --text-faint: hsl(var(--primary-h) calc(var(--primary-s) * 0.14 * var(--tint-dark)) 52%); /* -- Sombras neumórficas: par luz/oscuridad, fuente única arriba-izq ----- */ --shadow-light: hsl(var(--primary-h) calc(var(--primary-s) * 0.3 * var(--tint-dark)) 34% / 0.5); --shadow-dark: hsl(var(--primary-h) calc(var(--primary-s) * 0.5 * var(--tint-dark)) 2% / 0.7); /* -- Vidrio (solo capas flotantes: nav) ----------------------------------- */ --glass-bg: hsl(var(--primary-h) calc(var(--primary-s) * 0.3 * var(--tint-dark)) 10% / 0.68); --glass-border: hsl(var(--primary-h) calc(var(--primary-s) * 0.35 * var(--tint-dark)) 100% / 0.1); --glass-shadow: hsl(var(--primary-h) calc(var(--primary-s) * 0.5 * var(--tint-dark)) 2% / 0.45); --focus-ring: hsl(var(--primary-h) var(--primary-s) 66%); /* -- Estado de entidades (semáforo convencional, no el color de marca) --- Mismas fórmulas que el modo oscuro de la app: el significado manda sobre la coherencia cromática cuando se lee de un vistazo. */ --status-free: hsl(148 calc(var(--primary-s) * 0.7) 52%); --status-free-soft: hsl(148 calc(var(--primary-s) * 0.7) 52% / 0.18); --status-busy: hsl(6 calc(var(--primary-s) * 0.8) 62%); --status-busy-soft: hsl(6 calc(var(--primary-s) * 0.8) 62% / 0.18); --status-hold: hsl(38 calc(var(--primary-s) * 0.85) 60%); --status-hold-soft: hsl(38 calc(var(--primary-s) * 0.85) 60% / 0.2); /* -- Forma ---------------------------------------------------------------- */ --radius-sm: calc(10px * var(--radius-scale)); --radius-md: calc(14px * var(--radius-scale)); --radius-lg: calc(20px * var(--radius-scale)); --radius-xl: calc(28px * var(--radius-scale)); --radius-full: 999px; /* -- Elevación: mismo vocabulario cerrado que el panel de operación ------ */ --elev-raised: calc(9px * var(--depth)) calc(9px * var(--depth)) calc(20px * var(--depth)) var(--shadow-dark), calc(-7px * var(--depth)) calc(-7px * var(--depth)) calc(16px * var(--depth)) var(--shadow-light); --elev-raised-sm: calc(5px * var(--depth)) calc(5px * var(--depth)) calc(12px * var(--depth)) var(--shadow-dark), calc(-4px * var(--depth)) calc(-4px * var(--depth)) calc(9px * var(--depth)) var(--shadow-light); --elev-inset: inset calc(6px * var(--depth)) calc(6px * var(--depth)) calc(14px * var(--depth)) var(--shadow-dark), inset calc(-5px * var(--depth)) calc(-5px * var(--depth)) calc(10px * var(--depth)) var(--shadow-light); --elev-inset-sm: inset calc(3px * var(--depth)) calc(3px * var(--depth)) calc(7px * var(--depth)) var(--shadow-dark), inset calc(-2px * var(--depth)) calc(-2px * var(--depth)) calc(5px * var(--depth)) var(--shadow-light); --elev-pressed: inset calc(4px * var(--depth)) calc(4px * var(--depth)) calc(9px * var(--depth)) var(--shadow-dark), inset calc(-3px * var(--depth)) calc(-3px * var(--depth)) calc(7px * var(--depth)) var(--shadow-light); --elev-overlay: 0 20px 44px var(--glass-shadow), inset 0 1px 0 hsl(0 0% 100% / 0.04); /* Elevación reforzada para hover: mismos pares luz/oscuridad, mayor alcance. Nunca un halo de color a offset cero — ver DESIGN.md, Regla del Material Coherente. */ --elev-raised-hover: calc(13px * var(--depth)) calc(13px * var(--depth)) calc(26px * var(--depth)) var(--shadow-dark), calc(-10px * var(--depth)) calc(-10px * var(--depth)) calc(20px * var(--depth)) var(--shadow-light); /* -- Motion ---------------------------------------------------------------- */ --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --dur-fast: 140ms; --dur-base: 240ms; --dur-slow: 2400ms; --tap-min: 44px; color-scheme: dark; }