/* ============================================================
   brand.css - XS Wheels
   Direction: electric blue script mark, lime ring accents,
   glossy charcoal surfaces, cleaner light-mode variant.
   ============================================================ */
:root {
  --brand-primary:   #1477ff;
  --brand-secondary: #0a4fc2;
  --brand-accent:    #8cc63f;

  --color-bg:        #04070b;
  --color-surface:   #0b1118;
  --color-border:    rgba(140, 198, 63, 0.16);
  --color-text:      #f4f8fc;
  --color-text-2:    #9aa7bb;
  --color-text-3:    #546173;

  --font-display: 'Geist', system-ui, sans-serif;
  --font-body:    'Geist', system-ui, sans-serif;
  --font-mono:    'Geist Mono', ui-monospace, monospace;

  --xs-glow:      0 0 30px rgba(20, 119, 255, 0.32);
  --xs-accent-glow: 0 0 26px rgba(140, 198, 63, 0.24);
  --xs-panel: linear-gradient(180deg, rgba(11, 17, 24, 0.95), rgba(5, 9, 14, 0.92));
}

[data-theme="light"] {
  --brand-primary:   #0a84ff;
  --brand-secondary: #0d5cb6;
  --brand-accent:    #88c344;
  --color-bg:        #f4f7fb;
  --color-surface:   #ffffff;
  --color-border:    rgba(10, 17, 24, 0.10);
  --color-text:      #111827;
  --color-text-2:    #5f6d80;
  --color-text-3:    #95a1b3;
  --xs-glow:         0 0 22px rgba(10, 132, 255, 0.15);
  --xs-accent-glow:  0 0 18px rgba(136, 195, 68, 0.12);
  --xs-panel: linear-gradient(180deg, rgba(255, 255, 255, 0.97), rgba(241, 246, 251, 0.94));
}

[data-theme="light"] .nav {
  background: rgba(244, 247, 251, 0.9);
  border-bottom-color: rgba(17, 24, 39, 0.08);
}

[data-theme="light"] .nav-logo-oval {
  background: #ffffff;
  box-shadow: 0 0 0 1px rgba(180, 188, 198, 0.8), 0 0 0 4px rgba(136, 195, 68, 0.9);
}

[data-theme="light"] #particles-canvas {
  opacity: 0.26;
}