/* =============================================================
   Vybe Space — Design Token Layer  (tokens.css)
   Sprint 2: Phase 0B design system foundation
   Load BEFORE auth.css in base.html.
   ============================================================= */

:root {
    color-scheme: dark;

    /* ── Typography ─────────────────────────────────────────── */
    --font-sans: "Segoe UI Variable", "Avenir Next", "Helvetica Neue", sans-serif;
    --font-display: "Georgia", "Iowan Old Style", serif;

    /* ── Colour palette ─────────────────────────────────────── */
    --bg:           #020304;
    --panel:        #06090D;
    --surface:      #0B1016;
    --text:         #F7F8FF;
    --muted:        #AAB2C0;
    --neon-pink:    #FF2DAA;
    --neon-purple:  #8B5CFF;
    --neon-green:   #39FF88;
    --neon-cyan:    #00E5FF;
    --border:       rgba(255, 255, 255, 0.18);

    /* ── Shape ──────────────────────────────────────────────── */
    --radius-lg:    1.5rem;
    --radius-md:    1.1rem;
    --radius-sm:    0.6rem;

    /* ── Elevation ──────────────────────────────────────────── */
    --card-shadow:  0 32px 90px rgba(0, 0, 0, 0.72);

    /* ── Buttons ────────────────────────────────────────────── */
    --button-text:  #04070A;

    /* ── vs-* alias tokens (design system semantic names) ───── */
    --vs-color-bg:          var(--bg);
    --vs-color-panel:       var(--panel);
    --vs-color-surface:     var(--surface);
    --vs-color-text:        var(--text);
    --vs-color-muted:       var(--muted);
    --vs-color-accent:      var(--neon-purple);
    --vs-color-accent-alt:  var(--neon-pink);
    --vs-color-success:     var(--neon-green);
    --vs-color-info:        var(--neon-cyan);
    --vs-color-border:      var(--border);

    --vs-font-sans:         var(--font-sans);
    --vs-font-display:      var(--font-display);

    --vs-radius-lg:         var(--radius-lg);
    --vs-radius-md:         var(--radius-md);
    --vs-radius-sm:         var(--radius-sm);

    --vs-shadow-card:       var(--card-shadow);
    --vs-shadow-glow-pink:  0 0 18px rgba(255, 45, 170, 0.35);
    --vs-shadow-glow-purple:0 0 18px rgba(139, 92, 255, 0.35);
    --vs-shadow-glow-cyan:  0 0 18px rgba(0, 229, 255, 0.35);

    /* ── Spacing scale ──────────────────────────────────────── */
    --vs-space-1:   0.25rem;   /* 4 px  */
    --vs-space-2:   0.5rem;    /* 8 px  */
    --vs-space-3:   0.75rem;   /* 12 px */
    --vs-space-4:   1rem;      /* 16 px */
    --vs-space-5:   1.25rem;   /* 20 px */
    --vs-space-6:   1.5rem;    /* 24 px */
    --vs-space-8:   2rem;      /* 32 px */
    --vs-space-10:  2.5rem;    /* 40 px */
    --vs-space-12:  3rem;      /* 48 px */

    /* ── Transition ─────────────────────────────────────────── */
    --vs-transition: 180ms ease;
}