/* ============================================================
   SESSION SOLOS — Design Tokens
   Direction: Neon Noir (Convergence Pass)
   Updated: 2026-03-11
   ============================================================ */

:root {
  /* ── Core Colors ───────────────────────────────────────── */
  --ss-bg:              #060608;
  --ss-panel:           #0e0f14;
  --ss-panel-soft:      #141620;
  --ss-surface:         #191b26;
  --ss-elevated:        #1f2130;
  --ss-input-bg:        #0b0c12;

  /* ── Text ──────────────────────────────────────────────── */
  --ss-text:            #f0f1f5;
  --ss-text-secondary:  #b8bbc9;
  --ss-muted:           #8f93a5;
  --ss-dim:             #5c6078;

  /* ── Accent: Hot Pink (Primary Brand) ──────────────────── */
  --ss-hot:             #ff0d8b;
  --ss-hot-bright:      #ff2a99;
  --ss-hot-soft:        #ff5aaf;
  --ss-hot-glow:        rgba(255, 13, 139, 0.25);
  --ss-hot-subtle:      rgba(255, 13, 139, 0.10);

  /* ── Accent: Violet (Secondary Brand) ──────────────────── */
  --ss-violet:          #b95dff;
  --ss-violet-bright:   #c380ff;
  --ss-violet-deep:     #9f4eff;
  --ss-violet-glow:     rgba(185, 93, 255, 0.22);
  --ss-violet-subtle:   rgba(185, 93, 255, 0.08);

  /* ── Accent: Orchid (Tertiary) ─────────────────────────── */
  --ss-orchid:          #e96cff;
  --ss-orchid-glow:     rgba(233, 108, 255, 0.15);

  /* ── Accent: Cyan (GP / Utility) ───────────────────────── */
  --ss-cyan:            #00d5ff;
  --ss-cyan-deep:       #00c4b8;
  --ss-cyan-glow:       rgba(0, 213, 255, 0.20);

  /* ── Semantic Colors ───────────────────────────────────── */
  --ss-success:         #22c55e;
  --ss-warning:         #f59e0b;
  --ss-error:           #ef4444;
  --ss-info:            #3b82f6;

  /* ── Borders ───────────────────────────────────────────── */
  --ss-line:            rgba(255, 255, 255, 0.08);
  --ss-line-soft:       rgba(255, 255, 255, 0.05);
  --ss-line-strong:     rgba(255, 255, 255, 0.14);

  /* ── Gradients ─────────────────────────────────────────── */
  --ss-gradient-primary:   linear-gradient(125deg, #f41794, #a654ff);
  --ss-gradient-hot:       linear-gradient(130deg, #f41794, #c90e71);
  --ss-gradient-violet:    linear-gradient(130deg, #ad5bfa, #7b3ee3);
  --ss-gradient-cyan:      linear-gradient(130deg, #00d5ff, #00c4b8);
  --ss-gradient-surface:   linear-gradient(160deg, rgba(25, 27, 38, 0.85), rgba(12, 13, 18, 0.95));
  --ss-gradient-toolbar:   linear-gradient(180deg, rgba(17, 18, 23, 0.8), rgba(12, 13, 18, 0.7));

  /* ── Glow Strengths ────────────────────────────────────── */
  --ss-glow-sm:         0 0 8px;
  --ss-glow-md:         0 0 16px;
  --ss-glow-lg:         0 0 30px;
  --ss-glow-xl:         0 0 60px;

  /* ── Shadows ───────────────────────────────────────────── */
  --ss-shadow-sm:       0 2px 8px rgba(0, 0, 0, 0.20);
  --ss-shadow-md:       0 8px 18px rgba(0, 0, 0, 0.30);
  --ss-shadow-lg:       0 24px 60px rgba(0, 0, 0, 0.55);
  --ss-shadow-card:     0 8px 30px rgba(0, 0, 0, 0.40);
  --ss-shadow-btn:      0 2px 12px rgba(255, 13, 139, 0.20);

  /* ── Border Radius ─────────────────────────────────────── */
  --ss-radius-xs:       6px;
  --ss-radius-sm:       9px;
  --ss-radius-md:       10px;
  --ss-radius-lg:       12px;
  --ss-radius-xl:       14px;
  --ss-radius-2xl:      18px;
  --ss-radius-pill:     999px;

  /* ── Spacing Scale (4px base) ──────────────────────────── */
  --ss-space-1:         4px;
  --ss-space-2:         8px;
  --ss-space-3:         12px;
  --ss-space-4:         16px;
  --ss-space-5:         20px;
  --ss-space-6:         24px;
  --ss-space-7:         28px;
  --ss-space-8:         32px;
  --ss-space-10:        40px;
  --ss-space-12:        48px;

  /* ── Typography ────────────────────────────────────────── */
  --ss-font-heading:    'Sora', system-ui, -apple-system, sans-serif;
  --ss-font-ui:         'Manrope', system-ui, -apple-system, sans-serif;
  --ss-font-body:       'Sora', system-ui, -apple-system, sans-serif;

  --ss-text-xs:         0.68rem;   /* 10.9px — labels */
  --ss-text-sm:         0.78rem;   /* 12.5px — small UI */
  --ss-text-base:       0.88rem;   /* 14px — body */
  --ss-text-md:         0.93rem;   /* 15px — card meta */
  --ss-text-lg:         1.1rem;    /* 17.6px — card title */
  --ss-text-xl:         1.35rem;   /* 21.6px — section heading */
  --ss-text-2xl:        1.8rem;    /* 28.8px — page heading */
  --ss-text-3xl:        2.6rem;    /* 41.6px — logo display */

  /* ── Transitions ───────────────────────────────────────── */
  --ss-ease-fast:       120ms ease;
  --ss-ease-base:       150ms ease;
  --ss-ease-smooth:     200ms ease;
  --ss-ease-slow:       300ms ease;

  /* ── Z-Index Scale ─────────────────────────────────────── */
  --ss-z-base:          1;
  --ss-z-card:          10;
  --ss-z-toolbar:       20;
  --ss-z-modal:         100;
  --ss-z-toast:         200;
}