/* ===================================================================== SUPERCYCLER · Design Tokens "Neon Arcade Grow" — colors borrowed from the logo, applied to a technical IoT controller for grow rooms. Dark-first, chunky, loud. ===================================================================== */ /* ---------- Webfonts ---------------------------------------------------- */ /* Bungee — chunky arcade display face, used for headings, labels, numbers that need that "marquee" feel. (Substitute, see README.) */ /* Space Grotesk — clean geometric sans for body, data, dense UI. */ /* JetBrains Mono — terminal/data tickers, IDs, codes. */ @import url('https://fonts.googleapis.com/css2?family=Bungee&family=Space+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;700&display=swap'); :root { /* ========================================================= CORE PALETTE — pulled directly from the Supercycler logo ========================================================= */ --neon-magenta: #FF2EA6; /* logo "SUPER" left half */ --neon-pink: #FF6FC8; /* lighter magenta highlight */ --neon-cyan: #4FE3D6; /* logo "CYCLER" right half */ --neon-aqua: #8AF0E5; /* lighter cyan highlight */ --neon-yellow: #FFE94A; /* logo outer outline */ --neon-lime: #C6FF4A; /* fresh growth accent */ --neon-violet: #8B5CFF; /* secondary accent */ --neon-orange: #FF8A3D; /* warning / grow lamp glow */ /* Zona compartida / colaborador con permiso de edición vigente. FUENTE ÚNICA de este ámbar — lo consumen el dashboard (dashboard-mobile.php: header hazard, card MODO LECTURA, filas act-by-collab / jrn-by-collab, --accent shared) y Zone Lab (Compartir.jsx: GRANT_AMBER = 'var(--sc-collab-amber)'), que renderiza en el mismo documento y hereda este token. Ajustar el tono acá y en ningún otro lado. */ --sc-collab-amber: #ff9d2e; --sc-collab-red: #ff3b30; /* alerta roja zona compartida */ /* 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); /* ========================================================= SURFACES — DARK (default) Deep purple-black, never flat #000. Cabinet of an arcade. ========================================================= */ --bg-0: #0B0518; /* page bg, deepest purple-black */ --bg-1: #140A28; /* card surface */ --bg-2: #1E1238; /* card surface raised */ --bg-3: #2A1A4A; /* hover / active row */ --bg-inset:#070210; /* inset / well */ /* Borders & dividers — subtle but never invisible */ --border-1: rgba(255, 110, 200, 0.18); /* default border, magenta tint */ --border-2: rgba(79, 227, 214, 0.22); /* accent border, cyan tint */ --border-3: rgba(255, 233, 74, 0.30); /* loud border, yellow tint */ --divider: rgba(255, 255, 255, 0.06); /* ========================================================= FOREGROUNDS ========================================================= */ --fg-1: #FFF8E7; /* primary text, warm off-white */ --fg-2: #C9BEDD; /* secondary text, lavender gray */ --fg-3: #847A9C; /* tertiary, labels, captions */ --fg-4: #4D466A; /* disabled, hint */ --fg-on-neon: #0B0518; /* text on bright neon fills */ /* ========================================================= SEMANTIC — STATES ========================================================= */ --ok: var(--neon-lime); --warn: var(--neon-yellow); --danger: #FF4D6B; --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: #4FB8FF; /* 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(255, 46, 166, 0.45), 0 0 24px rgba(255, 46, 166, 0.55); --glow-cyan: 0 0 0 1px rgba(79, 227, 214, 0.45), 0 0 24px rgba(79, 227, 214, 0.55); --glow-yellow: 0 0 0 1px rgba(255, 233, 74, 0.55), 0 0 18px rgba(255, 233, 74, 0.45); --glow-lime: 0 0 0 1px rgba(198, 255, 74, 0.45), 0 0 18px rgba(198, 255, 74, 0.45); --glow-soft: 0 0 32px rgba(255, 110, 200, 0.18); /* Text glow used on chunky display numbers */ --text-glow-cyan: 0 0 12px rgba(79, 227, 214, 0.55); --text-glow-yellow: 0 0 12px rgba(255, 233, 74, 0.55); --text-glow-magenta: 0 0 12px rgba(255, 46, 166, 0.55); /* ========================================================= MOTION ========================================================= */ --ease-pop: cubic-bezier(0.22, 1.4, 0.36, 1); /* slight overshoot */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in: cubic-bezier(0.4, 0, 1, 1); --dur-fast: 140ms; --dur-base: 220ms; --dur-slow: 360ms; /* ========================================================= TYPOGRAPHY — families ========================================================= */ --font-display: 'Bungee', 'Impact', system-ui, sans-serif; --font-body: 'Space Grotesk', -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 Space Grotesk. ========================================================= */ --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; } /* ===================================================================== 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(255, 46, 166, 0.22); --border-2: rgba(79, 180, 170, 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. */ /* Default (dark theme) per-color metric values */ [data-metric-color="magenta"] { --metric-c: var(--neon-pink); --metric-glow: var(--text-glow-magenta); } [data-metric-color="cyan"] { --metric-c: var(--neon-cyan); --metric-glow: var(--text-glow-cyan); } [data-metric-color="yellow"] { --metric-c: var(--neon-yellow); --metric-glow: var(--text-glow-yellow); } [data-metric-color="lime"] { --metric-c: var(--neon-lime); --metric-glow: 0 0 12px rgba(198, 255, 74, 0.6); } [data-metric-color="orange"] { --metric-c: var(--neon-orange); --metric-glow: 0 0 12px rgba(255, 138, 61, 0.6); } [data-metric-color="violet"] { --metric-c: var(--neon-violet); --metric-glow: 0 0 12px rgba(139, 92, 255, 0.6); } [data-metric-color="aqua"] { --metric-c: var(--neon-aqua); --metric-glow: 0 0 12px rgba(79, 227, 214, 0.6); } [data-metric-color="pink"] { --metric-c: var(--neon-pink); --metric-glow: var(--text-glow-magenta); } [data-metric-color="water"] { --metric-c: var(--metric-water); --metric-glow: 0 0 12px rgba(79, 184, 255, 0.6); } [data-metric-color="soil"] { --metric-c: var(--metric-soil); --metric-glow: none; } [data-metric-color="muted"] { --metric-c: var(--fg-4); --metric-glow: none; } /* Light-theme alert palette overrides */ [data-theme="light"] [data-metric-color="orange"] { --metric-c: #C9000F; --metric-glow: none; } [data-theme="light"] [data-metric-color="magenta"] { --metric-c: #C9000F; --metric-glow: none; } [data-theme="light"] [data-metric-color="yellow"] { --metric-c: #B8860B; --metric-glow: none; } [data-theme="light"] [data-metric-color="cyan"], [data-theme="light"] [data-metric-color="lime"], [data-theme="light"] [data-metric-color="aqua"], [data-theme="light"] [data-metric-color="violet"], [data-theme="light"] [data-metric-color="water"], [data-theme="light"] [data-metric-color="soil"], [data-theme="light"] [data-metric-color="pink"] { --metric-c: #1A0A2E; --metric-glow: none; } [data-theme="light"] [data-metric-color="muted"] { --metric-c: #8E7DA8; --metric-glow: none; } /* 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); }