/*
 * TenTool — Design System (vibe : synthwave / cyberpunk / arcade)
 * ──────────────────────────────────────────────────────────────────────────
 * Single source of truth for the visual identity. All later templates
 * should consume `var(--vibe-*)` rather than hardcoded values.
 *
 * Loading order : this file is included FIRST in templates/desktop/base.html.twig
 * so every downstream stylesheet (login, memberdashboard, inline <style>
 * blocks in views) can resolve the tokens.
 *
 * Phase 0 — Scaffolding only. No visual change yet : nothing currently in
 * the templates uses these tokens. The migration happens view-by-view in
 * the next phases.
 */

@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=VT323&display=swap');

:root {
    /* ── Palette : core neon ─────────────────────────────────────────── */
    --vibe-cyan:           #00e5ff;
    --vibe-magenta:        #ff2bd6;
    --vibe-purple:         #7a3cff;
    --vibe-gold-neon:      #ffcc00;
    --vibe-green-neon:     #39ff14;
    --vibe-red-neon:       #ff2e63;

    /* ── Palette : surfaces ──────────────────────────────────────────── */
    --vibe-bg-base:        #0a0e27;     /* page background */
    --vibe-bg-card:        #14182f;     /* primary card / panel */
    --vibe-bg-card-deep:   #0d1024;     /* nested / inner card */
    --vibe-bg-overlay:     rgba(10, 14, 39, 0.72);  /* parallax dimmer */

    /* ── Palette : text ──────────────────────────────────────────────── */
    --vibe-text-strong:    #e8ecff;     /* high-contrast body */
    --vibe-text-soft:      #9aa3c7;     /* secondary body */
    --vibe-text-mute:      #5a6291;     /* muted / disabled */

    /* ── Glows (neon halo via box-shadow) ────────────────────────────── */
    --vibe-glow-cyan:      0 0 8px var(--vibe-cyan),    0 0 16px rgba(0, 229, 255, 0.45);
    --vibe-glow-magenta:   0 0 8px var(--vibe-magenta), 0 0 16px rgba(255, 43, 214, 0.45);
    --vibe-glow-purple:    0 0 8px var(--vibe-purple),  0 0 16px rgba(122, 60, 255, 0.45);
    --vibe-glow-gold:      0 0 8px var(--vibe-gold-neon), 0 0 16px rgba(255, 204, 0, 0.45);
    --vibe-glow-soft:      0 0 6px rgba(0, 229, 255, 0.25);  /* subtle ambient halo */

    /* ── Borders ─────────────────────────────────────────────────────── */
    --vibe-border-cyan:    2px solid var(--vibe-cyan);
    --vibe-border-magenta: 2px solid var(--vibe-magenta);
    --vibe-border-soft:    1px solid rgba(0, 229, 255, 0.18);

    /* ── Radii ───────────────────────────────────────────────────────── */
    --vibe-radius-card:    10px;
    --vibe-radius-pill:    999px;
    --vibe-radius-sm:      4px;

    /* ── Typography ──────────────────────────────────────────────────── */
    --vibe-font-display:   'Press Start 2P', 'Press Start 2P Web', monospace;
    --vibe-font-body:      'VT323', 'Major Mono Display', 'JetBrains Mono', monospace;
    --vibe-font-data:      'JetBrains Mono', 'Consolas', monospace;  /* keep existing for dense numerics */

    --vibe-text-display-xl: 1.6em;
    --vibe-text-display-lg: 1.25em;
    --vibe-text-display-md: 0.85em;     /* Press Start 2P is huge by default */
    --vibe-text-body:       1em;        /* VT323 reads great at 1em */
    --vibe-text-meta:       0.78em;

    /* ── Spacing scale ───────────────────────────────────────────────── */
    --vibe-gap-xs:         0.25rem;
    --vibe-gap-sm:         0.5rem;
    --vibe-gap-md:         0.75rem;
    --vibe-gap-lg:         1rem;
    --vibe-gap-xl:         1.5rem;

    /* ── Motion ──────────────────────────────────────────────────────── */
    --vibe-pulse-duration: 2.4s;
    --vibe-ease:           cubic-bezier(0.4, 0, 0.2, 1);

    /* ── Decor layer (parallax background) ───────────────────────────── */
    --vibe-decor-bg-image: none;    /* filled in once the AI-rendered pano lands in assets/icons/decor/ */
    --vibe-decor-bg-position: center center;
    --vibe-decor-bg-size:  cover;
    --vibe-decor-bg-opacity: 0.55;
}

/* Pulsing neon halo — opt-in via `class="vibe-pulse"` for the bits that
   should breathe (e.g. the active nav icon, the live price). */
@keyframes vibe-pulse {
    0%, 100% { box-shadow: var(--vibe-glow-soft); }
    50%      { box-shadow: var(--vibe-glow-cyan); }
}
.vibe-pulse { animation: vibe-pulse var(--vibe-pulse-duration) var(--vibe-ease) infinite; }

/* Marker classes the next phases will lean on. Empty for now — no view
   has been migrated yet. They'll get rules in Phase 2 / 3. */
.vibe-card        { /* placeholder — will define card frame in Phase 2 */ }
.vibe-card--neon  { /* placeholder — neon-bordered variant */ }
.vibe-display     { /* placeholder — Press Start 2P heading */ }
.vibe-body        { /* placeholder — VT323 body */ }