/*
 * Cyberpunk Club — Default Theme
 * Vibe: Neon-drenched gaming lounge at 2am.
 * A dimly lit city skyline outside the window.
 *
 * Dominant accent: magenta (#FF137C)
 * High glow, fast animations, rounded geometry.
 * Text-shadow on accent text for neon bleed.
 */

:root[data-theme="cyberpunk"] {
  /* ── Structural backgrounds ── */
  --sx-bg-base:       #08060E;
  --sx-bg-surface:    #0F0B18;
  --sx-bg-raised:     #161122;
  --sx-bg-hover:      rgba(255, 19, 124, 0.08);
  --sx-bg-overlay:    rgba(8, 6, 14, 0.75);

  /* ── Text ── */
  --sx-text-primary:     #F0ECF6;
  --sx-text-secondary:   #B8B0C8;
  --sx-text-muted:       #8A80A0;
  --sx-text-faint:       #7C7090;
  --sx-text-placeholder: #7C7090;
  --sx-text-accent:      #FF137C;

  /* ── Accents ── */
  --sx-accent-1: #FF137C;
  --sx-accent-2: #742CFF;
  --sx-accent-3: #00D8FF;

  /* ── Semantic state colors ── */
  --sx-danger:  #FF3B5C;
  --sx-warning: #FFB020;
  --sx-success: #00E676;
  --sx-info:    #00D8FF;

  /* ── Borders ── */
  --sx-border:        rgba(255, 19, 124, 0.18);
  --sx-border-accent: rgba(255, 19, 124, 0.35);
  --sx-border-subtle: rgba(255, 19, 124, 0.08);

  /* ── Interactive surfaces ── */
  --sx-input-bg:     rgba(15, 11, 24, 0.80);
  --sx-input-border: rgba(255, 19, 124, 0.22);
  --sx-input-focus:  #FF137C;
  --sx-popup-bg:     #161122;
  --sx-popup-border: rgba(255, 19, 124, 0.25);
  --sx-popup-shadow: 0 8px 32px rgba(255, 19, 124, 0.15), 0 2px 8px rgba(0, 0, 0, 0.40);

  /* ── Behavior multipliers ── */
  --sx-blur:          20px;
  --sx-glow-strength: 1;
  --sx-atmosphere:    1;
  --sx-anim-speed:    1;
  --sx-transition:    0.12s;

  /* ── Shape ── */
  --sx-radius-sm:     4px;
  --sx-radius-md:     8px;
  --sx-radius-lg:     12px;
  --sx-radius-pill:   20px;
  --sx-avatar-radius: 10px;

  /* ── Typography treatment ── */
  --sx-heading-transform: none;
  --sx-heading-spacing:   -0.02em;
  --sx-heading-weight:    800;
  --sx-body-spacing:      0em;
  --sx-body-line-height:  1.5;

  /* ── Code blocks ── */
  --sx-code-bg:     #120E1C;
  --sx-code-text:   #00D8FF;
  --sx-code-border: rgba(255, 19, 124, 0.15);

  /* ── Selection and focus ── */
  --sx-selection-bg:   rgba(255, 19, 124, 0.30);
  --sx-selection-text:  #FFFFFF;
  --sx-focus-ring:     0 0 0 2px rgba(255, 19, 124, 0.50);

  /* ── Scrollbar ── */
  --sx-scrollbar-thumb: rgba(255, 19, 124, 0.25);
  --sx-scrollbar-hover: rgba(255, 19, 124, 0.45);
}