/* TopPC Theme - base / variables */
/* TopPC Theme app.css: dark neon design variables */
/* Variables */
:root {
  --fs-bg:            #0b0f14;
  --fs-surface:       #111827;
  --fs-surface-2:     #1a2233;
  --fs-purple:        #0057ff;
  --fs-purple-light:  #3da5ff;
  --fs-purple-dim:    rgba(0, 87, 255, .15);
  --fs-green:         #22c55e;
  --fs-green-light:   #4ade80;
  --fs-green-dim:     rgba(34, 197, 94, .15);
  --fs-text:          #f3f4f6;
  --fs-text-muted:    #9ca3af;
  --fs-muted:         #9ca3af;
  --fs-text-faint:    #6b7280;
  --fs-border:        #1f2d40;
  --fs-radius:        16px;
  --fs-radius-sm:     8px;
  --fs-radius-lg:     24px;
  --fs-transition:    .22s ease;
  --fs-shadow:        0 4px 24px rgba(0,0,0,.5);
  --fs-glow-purple:   0 0 28px rgba(0,87,255,.35);
  --fs-glow-green:    0 0 28px rgba(34,197,94,.35);
  --fs-container:     1280px;
  --fs-header-h:      72px;
  --fs-nav-h:         50px;
  --fs-hero-h:        330px;
  --fs-hero-badge-top: 1rem;
  --fs-hero-badge-right: clamp(1rem, 4vw, 2.5rem);
  --fs-hero-btn-h:    50px;
}

:root[data-theme="light"] {
  color-scheme: light;
  --fs-bg:            #f6f8fc;
  --fs-surface:       #ffffff;
  --fs-surface-2:     #eef2ff;
  --fs-purple-dim:    rgba(0, 87, 255, .10);
  --fs-green-dim:     rgba(34, 197, 94, .10);
  --fs-text:          #0f172a;
  --fs-text-muted:    #475569;
  --fs-muted:         #475569;
  --fs-text-faint:    #64748b;
  --fs-border:        #dbe3f0;
  --fs-shadow:        0 10px 30px rgba(15,23,42,.08);
  --fs-glow-purple:   0 0 18px rgba(0,87,255,.18);
  --fs-glow-green:    0 0 18px rgba(34,197,94,.16);
}