/* ===================================================================== SUPERCYCLER · Design Tokens del sitio publico Los valores NO son propios: son los del tema que la app aplica cuando el usuario no eligio ninguno — `satanic-brain` (SC_THEMES en dashboard-mobile.php:15819; el default se resuelve en :15914). Negro, superficies violetas, acento fucsia #d946ef, Roboto de cuerpo y Bungee en los titulos. Hasta el 2026-08-28 este archivo tenia la paleta "Neon Arcade Grow" (#0B0518 + #FF2EA6 + Space Grotesk). La migracion la hizo scripts/sc-repinta-publica-tokens-app.py. DOS FALSOS AMIGOS, por si alguien vuelve a buscar "el tema de la app": el `:root` de dashboard-mobile.php:1127 (#0d1117) es el fallback pre-JS, no el default — applyTheme() lo pisa entero; y `body.theme-neon` es una clase huerfana: 'neon' esta en _RETIRED y migra a satanic-brain (:15916). Los nombres --neon-* / --bg-* / --fg-* se conservan porque los consumen ~143 paginas (landing en 4 idiomas, manual, reportes, cientify-view). Quedan como ALIAS de los tokens de la app, declarados abajo. ===================================================================== */ /* ---------- Webfonts ---------------------------------------------------- */ /* Bungee — display chunky; titulos, labels y numeros. Es lo que usa body.ob-dashboard h1..h4 en la app (uppercase, letter-spacing .02em). */ /* Roboto — cuerpo, datos, UI densa. El body del dashboard. */ /* JetBrains Mono — tickers, IDs, codigos. */ @import url('https://fonts.googleapis.com/css2?family=Bungee&family=Roboto:wght@400;500;700;900&family=JetBrains+Mono:wght@400;500;700&display=swap'); :root { /* ========================================================= TEMA DE LA APP — las vars de SC_THEMES['satanic-brain'], tal cual. Fuente de verdad de todo lo de abajo. Si cambia el tema por defecto del dashboard, se cambia ACA y el resto sigue solo. ========================================================= */ --bg: #000000; --bg1: #0a0612; --bg2: #1a0e2e; --card: #120822; --border: rgba(217, 70, 239, .25); --text: #f0e0ff; --text2: #c0a8d8; --text3: #8870a0; --accent: #d946ef; --red: #f85149; --orange: #f0883e; --blue: #a78bfa; --green: #3fb950; /* applyTheme() no toca estas dos: vienen del :root de la app y valen igual en los nueve temas. */ --alert-warn: #f59e0b; --alert-crit: #ef4444; /* ========================================================= CORE PALETTE — alias historicos. Los nombres dicen "neon" por la paleta vieja; los valores son los del tema de la app. ========================================================= */ --neon-magenta: #D946EF; /* logo "SUPER" left half */ --neon-pink: #E879F9; /* lighter magenta highlight */ --neon-cyan: #A78BFA; /* logo "CYCLER" right half */ --neon-aqua: #C4B5FD; /* lighter cyan highlight */ --neon-yellow: #F59E0B; /* logo outer outline */ --neon-lime: #3FB950; /* fresh growth accent */ --neon-violet: #A855F7; /* secondary accent */ --neon-orange: #F0883E; /* warning / grow lamp glow */ /* Brand signature gradient, used on logos, hero numbers, key CTAs */ --brand-gradient: linear-gradient(90deg, var(--neon-magenta) 0%, var(--neon-pink) 25%, var(--neon-aqua) 60%, var(--neon-cyan) 100%); /* Soft "scanline" gradient used as protection on dark surfaces */ --scanline-gradient: repeating-linear-gradient( 0deg, rgba(255,255,255,0.025) 0px, rgba(255,255,255,0.025) 1px, transparent 1px, transparent 3px); /* @kind other */ /* ========================================================= SURFACES — DARK (default) Deep purple-black, never flat #000. Cabinet of an arcade. ========================================================= */ --bg-0: #000000; /* page bg, deepest purple-black */ --bg-1: #120822; /* card surface */ --bg-2: #1A0E2E; /* card surface raised */ --bg-3: #241640; /* hover / active row */ --bg-inset:#0a0612; /* inset / well */ /* Borders & dividers — subtle but never invisible */ --border-1: rgba(232, 121, 249, 0.18); /* default border, magenta tint */ --border-2: rgba(167, 139, 250, 0.22); /* accent border, cyan tint */ --border-3: rgba(245, 158, 11, 0.30); /* loud border, yellow tint */ --divider: rgba(255, 255, 255, 0.06); /* ========================================================= FOREGROUNDS ========================================================= */ --fg-1: #F0E0FF; /* primary text, warm off-white */ --fg-2: #C0A8D8; /* secondary text, lavender gray */ --fg-3: #8870A0; /* tertiary, labels, captions */ --fg-4: #5C4A70; /* disabled, hint */ --fg-on-neon: #000000; /* text on bright neon fills */ /* ========================================================= SEMANTIC — STATES ========================================================= */ --ok: var(--neon-lime); --warn: var(--neon-yellow); --danger: #F85149; --info: var(--neon-cyan); --premium: var(--neon-magenta); /* ========================================================= SEMANTIC — DOMAIN (grow-room concepts) Each major metric gets its own accent so dashboards parse fast. ========================================================= */ --metric-temp: var(--neon-orange); /* heat */ --metric-hum: var(--neon-cyan); /* humidity */ --metric-vpd: var(--neon-lime); /* vapor pressure deficit */ --metric-light: var(--neon-yellow); /* lights */ --metric-water: #A78BFA; /* irrigation */ --metric-soil: #C18A4D; /* soil moisture, earthy */ --metric-power: var(--neon-magenta); /* watts/amps */ --metric-co2: var(--neon-violet); /* ========================================================= RADII ========================================================= */ --radius-xs: 4px; --radius-sm: 8px; --radius-md: 14px; --radius-lg: 22px; --radius-xl: 32px; --radius-pill: 999px; /* ========================================================= SPACING (4-base scale) ========================================================= */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; /* ========================================================= SHADOWS & GLOWS — neon glow is the signature ========================================================= */ --shadow-card: 0 8px 24px rgba(0, 0, 0, 0.45), 0 1px 0 rgba(255, 255, 255, 0.03) inset; --shadow-pop: 0 16px 40px rgba(0, 0, 0, 0.55), 0 1px 0 rgba(255, 255, 255, 0.04) inset; --glow-magenta: 0 0 0 1px rgba(217, 70, 239, 0.45), 0 0 24px rgba(217, 70, 239, 0.55); --glow-cyan: 0 0 0 1px rgba(167, 139, 250, 0.45), 0 0 24px rgba(167, 139, 250, 0.55); --glow-yellow: 0 0 0 1px rgba(245, 158, 11, 0.55), 0 0 18px rgba(245, 158, 11, 0.45); --glow-lime: 0 0 0 1px rgba(63, 185, 80, 0.45), 0 0 18px rgba(63, 185, 80, 0.45); --glow-soft: 0 0 32px rgba(232, 121, 249, 0.18); /* Text glow used on chunky display numbers */ --text-glow-cyan: 0 0 12px rgba(167, 139, 250, 0.55); --text-glow-yellow: 0 0 12px rgba(245, 158, 11, 0.55); --text-glow-magenta: 0 0 12px rgba(217, 70, 239, 0.55); /* ========================================================= MOTION ========================================================= */ --ease-pop: cubic-bezier(0.22, 1.4, 0.36, 1); /* @kind other */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* @kind other */ --ease-in: cubic-bezier(0.4, 0, 1, 1); /* @kind other */ --dur-fast: 140ms; /* @kind other */ --dur-base: 220ms; /* @kind other */ --dur-slow: 360ms; /* @kind other */ /* ========================================================= TYPOGRAPHY — families ========================================================= */ --font-display: 'Bungee', 'Impact', system-ui, sans-serif; --font-body: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace; --font-numeric: 'Bungee', var(--font-body); /* big readouts */ /* ========================================================= TYPOGRAPHY — semantic scale Heads use Bungee (chunky arcade), body uses Roboto. ========================================================= */ --type-display-1: 700 96px/0.95 var(--font-display); /* hero numbers */ --type-display-2: 700 64px/0.95 var(--font-display); /* big readouts (TEMP/HUM/VPD) */ --type-display-3: 700 44px/1.0 var(--font-display); /* mid readouts */ --type-h1: 700 32px/1.1 var(--font-display); --type-h2: 700 24px/1.15 var(--font-display); --type-h3: 700 18px/1.2 var(--font-display); --type-eyebrow: 700 11px/1.2 var(--font-display); /* tracked, uppercase */ --type-label: 600 12px/1.2 var(--font-body); /* uppercase labels */ --type-body: 400 15px/1.45 var(--font-body); --type-body-strong: 600 15px/1.45 var(--font-body); --type-small: 500 12px/1.4 var(--font-body); --type-mono: 500 12px/1.4 var(--font-mono); --type-mono-lg: 600 16px/1.4 var(--font-mono); /* Tracking */ --track-display: 0.02em; --track-eyebrow: 0.18em; --track-label: 0.10em; } /* ===================================================================== SHARED theme override — "zona prestada". When you're viewing SOMEONE ELSE'S zone, the whole UI reskins to a loud Rosso Corsa red + racing yellow so it's instantly, unmistakably NOT your own dark-magenta cabinet. Applied via [data-theme="shared"]. Overrides the --neon-* names so every component that references them repaints automatically. ===================================================================== */ [data-theme="shared"] { /* Reskin the core neon names → Ferrari red / racing yellow */ --neon-magenta: #FF1E00; /* rosso corsa — primary */ --neon-pink: #FF5A38; /* warm red highlight */ --neon-cyan: #FFD400; /* racing gold (was cyan) */ --neon-aqua: #FFE775; /* light gold highlight */ --neon-yellow: #FFEC00; /* signal yellow */ --neon-lime: #FFC400; /* amber-gold (was lime) */ --neon-violet: #FF7A00; /* warm orange (was violet) */ --neon-orange: #FF4D00; /* hot orange */ --brand-gradient: linear-gradient(90deg, #FF1E00 0%, #FF5A00 45%, #FFC400 80%, #FFEC00 100%); /* @kind color */ /* Warm red-black cabinet instead of purple-black */ --bg-0: #180200; /* page bg, oxblood black */ --bg-1: #260600; /* card surface */ --bg-2: #360B02; /* raised */ --bg-3: #4A1200; /* hover / active */ --bg-inset:#0F0100; /* well */ /* Borders take the red/gold tint */ --border-1: rgba(255, 60, 20, 0.28); --border-2: rgba(255, 212, 0, 0.30); --border-3: rgba(255, 236, 0, 0.42); --divider: rgba(255, 220, 180, 0.08); /* Warm foregrounds */ --fg-1: #FFF4E8; --fg-2: #F2C9AE; --fg-3: #B77A5C; --fg-4: #6E3A28; --fg-on-neon: #1A0200; /* Glows retinted so shadows/pops match */ --glow-magenta: 0 0 0 1px rgba(255, 30, 0, 0.55), 0 0 24px rgba(255, 30, 0, 0.6); --glow-cyan: 0 0 0 1px rgba(255, 212, 0, 0.5), 0 0 24px rgba(255, 212, 0, 0.55); --glow-yellow: 0 0 0 1px rgba(255, 236, 0, 0.6), 0 0 18px rgba(255, 236, 0, 0.5); --glow-lime: 0 0 0 1px rgba(255, 196, 0, 0.5), 0 0 18px rgba(255, 196, 0, 0.5); --glow-soft: 0 0 32px rgba(255, 80, 30, 0.22); --text-glow-cyan: 0 0 12px rgba(255, 212, 0, 0.55); --text-glow-yellow: 0 0 12px rgba(255, 236, 0, 0.6); --text-glow-magenta: 0 0 12px rgba(255, 30, 0, 0.6); /* Metric accents recolored into the red→gold ramp */ --metric-temp: #FF4D00; --metric-hum: #FFD400; --metric-vpd: #FFC400; --metric-light: #FFEC00; --metric-water: #FF9E00; --metric-power: #FF1E00; --metric-co2: #FF7A00; /* Metric readout tokens (mc/mg) so hero numbers pick up the theme */ --mc-magenta: #FF3A1A; --mg-magenta: var(--text-glow-magenta); --mc-cyan: #FFD400; --mg-cyan: var(--text-glow-cyan); --mc-yellow: #FFEC00; --mg-yellow: var(--text-glow-yellow); --mc-lime: #FFC400; --mg-lime: 0 0 12px rgba(255,196,0,0.6); --mc-orange: #FF4D00; --mg-orange: 0 0 12px rgba(255,77,0,0.6); --mc-violet: #FF7A00; --mg-violet: 0 0 12px rgba(255,122,0,0.6); --mc-aqua: #FFE775; --mg-aqua: var(--text-glow-cyan); --mc-pink: #FF5A38; --mg-pink: var(--text-glow-magenta); --mc-water: #FF9E00; --mg-water: 0 0 12px rgba(255,158,0,0.6); --mc-soil: #E0A24D; --mg-soil: none; /* @kind shadow */ --mc-muted: var(--fg-4); --mg-muted: none; /* @kind shadow */ --timer-c: #FFEC00; --timer-glow: var(--text-glow-yellow); } /* ===================================================================== LIGHT theme override — kept for legacy "rosa pastel" surfaces but the brand-forward direction is dark. Apply via [data-theme="light"]. ===================================================================== */ [data-theme="light"] { --bg-0: #FFD6E8; /* bubblegum candy page */ --bg-1: #FFFFFF; --bg-2: #FFEEF6; --bg-3: #FFC4DD; --bg-inset: #FFC4DD; --border-1: rgba(217, 70, 239, 0.22); --border-2: rgba(167, 139, 250, 0.30); --border-3: rgba(255, 170, 50, 0.45); --divider: rgba(120, 20, 80, 0.10); --fg-1: #3D0A28; --fg-2: #7A2A55; --fg-3: #A86289; --fg-4: #D89BB8; --fg-on-neon: #FFFFFF; --shadow-card: 0 4px 16px rgba(200, 40, 120, 0.10), 0 1px 0 rgba(255, 255, 255, 0.7) inset; } /* Light-theme alert palette for metric readouts: black = normal/cool · yellow = warning · red = danger Heat-class (orange/yellow/magenta) = ALERT colors. Cool/calm (cyan/lime/aqua/violet/water/muted) = neutral BLACK. */ /* Per-metric color + glow resolved through theme-scoped tokens (no descendant combinators needed). */ :root { --mc-magenta: var(--neon-pink); --mg-magenta: var(--text-glow-magenta); /* @kind shadow */ --mc-cyan: var(--neon-cyan); --mg-cyan: var(--text-glow-cyan); /* @kind shadow */ --mc-yellow: var(--neon-yellow); --mg-yellow: var(--text-glow-yellow); /* @kind shadow */ --mc-lime: var(--neon-lime); --mg-lime: 0 0 12px rgba(63, 185, 80, 0.6); /* @kind shadow */ --mc-orange: var(--neon-orange); --mg-orange: 0 0 12px rgba(240, 136, 62, 0.6); /* @kind shadow */ --mc-violet: var(--neon-violet); --mg-violet: 0 0 12px rgba(168, 85, 247, 0.6); /* @kind shadow */ --mc-aqua: var(--neon-aqua); --mg-aqua: 0 0 12px rgba(167, 139, 250, 0.6); /* @kind shadow */ --mc-pink: var(--neon-pink); --mg-pink: var(--text-glow-magenta); /* @kind shadow */ --mc-water: var(--metric-water); --mg-water: 0 0 12px rgba(167, 139, 250, 0.6); /* @kind shadow */ --mc-soil: var(--metric-soil); --mg-soil: none; /* @kind shadow */ --mc-muted: var(--fg-4); --mg-muted: none; /* @kind shadow */ } /* Light-theme alert palette: heat-class colors go red/amber, calm colors go near-black, glows off. */ [data-theme="light"] { --mc-orange: #C9000F; --mg-orange: none; /* @kind shadow */ --mc-magenta: #C9000F; --mg-magenta: none; /* @kind shadow */ --mc-yellow: #B8860B; --mg-yellow: none; /* @kind shadow */ --mc-cyan: #1A0A2E; --mg-cyan: none; /* @kind shadow */ --mc-lime: #1A0A2E; --mg-lime: none; /* @kind shadow */ --mc-aqua: #1A0A2E; --mg-aqua: none; /* @kind shadow */ --mc-violet: #1A0A2E; --mg-violet: none; /* @kind shadow */ --mc-water: #1A0A2E; --mg-water: none; /* @kind shadow */ --mc-soil: #1A0A2E; --mg-soil: none; /* @kind shadow */ --mc-pink: #1A0A2E; --mg-pink: none; /* @kind shadow */ --mc-muted: #8E7DA8; --mg-muted: none; /* @kind shadow */ } [data-metric-color="magenta"] { --metric-c: var(--mc-magenta); --metric-glow: var(--mg-magenta); /* @kind shadow */ } [data-metric-color="cyan"] { --metric-c: var(--mc-cyan); --metric-glow: var(--mg-cyan); } [data-metric-color="yellow"] { --metric-c: var(--mc-yellow); --metric-glow: var(--mg-yellow); } [data-metric-color="lime"] { --metric-c: var(--mc-lime); --metric-glow: var(--mg-lime); } [data-metric-color="orange"] { --metric-c: var(--mc-orange); --metric-glow: var(--mg-orange); } [data-metric-color="violet"] { --metric-c: var(--mc-violet); --metric-glow: var(--mg-violet); } [data-metric-color="aqua"] { --metric-c: var(--mc-aqua); --metric-glow: var(--mg-aqua); } [data-metric-color="pink"] { --metric-c: var(--mc-pink); --metric-glow: var(--mg-pink); } [data-metric-color="water"] { --metric-c: var(--mc-water); --metric-glow: var(--mg-water); } [data-metric-color="soil"] { --metric-c: var(--mc-soil); --metric-glow: var(--mg-soil); } [data-metric-color="muted"] { --metric-c: var(--mc-muted); --metric-glow: var(--mg-muted); } /* Light timer (main light countdown) — yellow on dark, hot magenta on light */ :root { --timer-c: var(--neon-yellow); --timer-glow: var(--text-glow-yellow); } [data-theme="light"] { --timer-c: #C71585; --timer-glow: 0 2px 0 rgba(255,255,255,0.6); } /* ===================================================================== Semantic element resets — opt-in by setting font-family on body. ===================================================================== */ .sc-display-1 { font: var(--type-display-1); letter-spacing: var(--track-display); } .sc-display-2 { font: var(--type-display-2); letter-spacing: var(--track-display); } .sc-display-3 { font: var(--type-display-3); letter-spacing: var(--track-display); } .sc-h1 { font: var(--type-h1); letter-spacing: var(--track-display); text-transform: uppercase; } .sc-h2 { font: var(--type-h2); letter-spacing: var(--track-display); text-transform: uppercase; } .sc-h3 { font: var(--type-h3); letter-spacing: var(--track-display); text-transform: uppercase; } .sc-eyebrow { font: var(--type-eyebrow); letter-spacing: var(--track-eyebrow); text-transform: uppercase; } .sc-label { font: var(--type-label); letter-spacing: var(--track-label); text-transform: uppercase; } .sc-body { font: var(--type-body); } .sc-small { font: var(--type-small); } .sc-mono { font: var(--type-mono); } /* The "hero number" treatment used on widgets (TEMP, HUM, VPD, time etc) */ .sc-readout { font-family: var(--font-display); font-weight: 700; letter-spacing: var(--track-display); background: var(--brand-gradient); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: var(--text-glow-cyan); } .sc-readout--yellow { background: linear-gradient(180deg, #FFF6A8 0%, var(--neon-yellow) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: var(--text-glow-yellow); } .sc-readout--magenta { background: linear-gradient(180deg, var(--neon-pink) 0%, var(--neon-magenta) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: var(--text-glow-magenta); } .sc-readout--cyan { background: linear-gradient(180deg, var(--neon-aqua) 0%, var(--neon-cyan) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: var(--text-glow-cyan); } /* ── Link al reporte del mes ─────────────────────────────────────────────── Vive aca y no en el