/* =====================================================================
HUESEANDO v3 — DESIGN TOKENS (single source of truth)
=====================================================================
WHERE TO PUT THIS FILE
----------------------
1. Save as: public/assets/css/hueseando-tokens.css
2. In public/layouts/main.php (or wherever lives), include it
BEFORE app.css:
3. Do NOT paste the :root block into app.css too — keep tokens in one
file so Claude Code can edit them in isolation.
COMPATIBILITY
-------------
The old --bs-* and --gig-* variables are redefined here pointing to the
new --h-* palette, so existing partials (musician-card.php, gig-card.php)
keep working without edits.
===================================================================== */
:root {
/* ───── Surfaces (dark warm w/ violet tint) ───── */
--h-bg: #07080F; /* page background */
--h-surface: #0D0F1C; /* cards, sections */
--h-surface-2: #14172E; /* inputs, raised elements */
--h-line: rgba(255,255,255,0.11);
--h-line-strong: rgba(255,255,255,0.22);
/* ───── Text ───── */
--h-fg: #F0F4FF;
--h-fg-dim: rgba(240,244,255,0.62);
--h-fg-muted: rgba(240,244,255,0.42);
/* ───── Neon accents ─────
Each accent has a fixed semantic role — do NOT reuse for other ideas. */
--h-pink: #FF3391; /* primary CTA, urgent, hot states */
--h-cyan: #00EAFF; /* info, links, "show" gigs, live status */
--h-violet: #B04FFF; /* "grabación" gigs, production */
--h-lime: #D6FF3D; /* available, success, pay/money */
--h-orange: #FF6B2B; /* "sesión" gigs, warnings, pending */
/* ───── Gig type colors (replaces old --gig-* if they existed) ───── */
--gig-show: var(--h-cyan);
--gig-ensayo: var(--h-lime);
--gig-grabacion: var(--h-violet);
--gig-sesion: var(--h-orange);
--gig-otro: var(--h-fg-dim);
/* ───── Semantic ───── */
--available: var(--h-lime);
--unavailable: #FF4D4D;
--pending: var(--h-orange);
--info: var(--h-cyan);
/* ───── Glows (box-shadow) ───── */
--h-glow-pink: 0 0 32px rgba(255,51,145,0.55);
--h-glow-cyan: 0 0 32px rgba(0,234,255,0.55);
--h-glow-lime: 0 0 28px rgba(214,255,61,0.55);
--h-glow-violet: 0 0 32px rgba(176,79,255,0.45);
--h-glow-orange: 0 0 28px rgba(255,107,43,0.45);
/* ───── Radii ───── */
--h-r-sm: 8px;
--h-r: 12px;
--h-r-lg: 18px;
--h-r-xl: 24px;
--h-pill: 999px;
/* ───── Type stacks ───── */
--h-display: 'Neue Montreal', 'Archivo', system-ui, sans-serif;
--h-sans: 'Neue Montreal', 'Inter', system-ui, sans-serif;
--h-mono: 'JetBrains Mono', ui-monospace, monospace;
/* ───── Bootstrap 5 overrides (keep compatibility) ───── */
--bs-body-bg: var(--h-bg);
--bs-body-color: var(--h-fg);
--bs-border-color: var(--h-line);
--bs-primary: #FF3391;
--bs-primary-rgb: 255, 51, 145;
}
/* ───── Required external fonts (add to ) ─────────────────────────
Neue Montreal is already self-hosted (DESIGN.md confirms). If not,
uncomment the @font-face fallback below pointing to your assets.
JetBrains Mono must be loaded via Google Fonts in main.php :
If Neue Montreal fails, Archivo (also self-hostable) is an acceptable
fallback with similar metrics.
─────────────────────────────────────────────────────────────────────── */
/* ───── Global base (optional — merge into app.css body rules) ───── */
body {
background: var(--h-bg);
color: var(--h-fg);
font-family: var(--h-sans);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* Ambient grid overlay (fixed, behind everything). Apply to body only
on public marketing pages — not inside the authenticated app. */
.h-ambient-grid { position: relative; }
.h-ambient-grid::before {
content: '';
position: fixed; inset: 0;
background-image:
linear-gradient(to right, rgba(0,234,255,0.04) 1px, transparent 1px),
linear-gradient(to bottom, rgba(0,234,255,0.04) 1px, transparent 1px);
background-size: 48px 48px;
pointer-events: none;
z-index: 0;
}
/* ───── Motion tokens ───── */
@keyframes h-pulse { 50% { opacity: 0.4; } }
@keyframes h-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }