/* Design tokens (light + dark) — extracted from the original style.css (lines 1-87) */
/* CynphoCode — style.css */
:root {
  --primary:       #7C5CFF;
  --primary-dark:  #6548F3;
  --primary-light: #EEE9FF;
  --primary-grad:  linear-gradient(135deg, #7C5CFF, #5EA0FF);
  --secondary:     #5EA0FF;
  --red:           #EF4444;
  --red-light:     #FFF0F0;
  --green:         #22C55E;
  --green-light:   #EDFBF5;
  --orange:        #F59E0B;
  --orange-light:  #FFF8EC;
  --blue:          #3B82F6;
  --blue-light:    #EBF3FF;
  --cyan:          #06B6D4;
  --cyan-light:    #E8FAFF;
  --success:       #1AA64A;
  --warning:       #DB8B00;
  --danger:        #E0405B;
  --bg:            #F7F8FC;
  --bg-2:          #FFFFFF;
  --card:          #FFFFFF;
  --navbar:        rgba(255,255,255,.72);
  --border:        #E4E7EC;
  --border-soft:   rgba(17,24,39,.07);
  --text:          #111827;
  --text-2:        #4B5563;
  --text-muted:    #4B5563;
  --text-light:    #6B7280;
  --shadow-xs:  0 1px 2px  rgba(44,62,80,0.05);
  --shadow-sm:  0 2px 8px  rgba(44,62,80,0.08);
  --shadow:     0 10px 35px rgba(44,62,80,0.08);
  --shadow-md:  0 20px 60px rgba(44,62,80,0.14);
  --shadow-glow: 0 0 0 rgba(124,92,255,0);
  --r-sm:  6px;
  --r:     12px;
  --r-lg:  18px;
  --r-xl:  24px;
  --r-card: 24px;
  --r-btn:  16px;
  --r-full: 9999px;
  --nav-h:      68px;
  --max-w:      1180px;
  --px:         24px;
  --container-w: 1280px;
  --section-gap: 120px;
  --card-pad:    32px;
  --btn-pad:     18px;
  --gap:         24px;
  --fs-hero:    clamp(2.4rem, 5vw, 4rem);
  --fs-section: clamp(1.7rem, 3.4vw, 2.625rem);
  --fs-card-title: 1.5rem;
  --fs-body:    1.125rem;
  --fs-small:   0.9375rem;
  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
[data-theme="dark"] {
  --bg:            #0D0F14;
  --bg-2:          #141821;
  --card:          #181C24;
  --navbar:        rgba(17,21,29,.72);
  --border:        rgba(255,255,255,.06);
  --border-soft:   rgba(255,255,255,.08);
  --text:          #F8FAFC;
  --text-2:        #B3BDD2;
  --text-muted:    #B3BDD2;
  --text-light:    #7E889B;
  --primary:       #7C5CFF;
  --secondary:     #5EA0FF;
  --primary-dark:  #9A7DFF;
  --primary-light: #1A1530;
  --primary-grad:  linear-gradient(135deg, #7C5CFF, #5EA0FF);
  --success:       #30D158;
  --warning:       #FFB547;
  --danger:        #FF5D73;
  --red-light:     #200C0C;
  --green-light:   #0C2216;
  --orange-light:  #201408;
  --blue-light:    #0C1828;
  --cyan-light:    #061A20;
  --shadow-xs:  0 1px 3px  rgba(0,0,0,0.35);
  --shadow-sm:  0 2px 10px rgba(0,0,0,0.35);
  --shadow:     0 10px 30px rgba(0,0,0,0.45);
  --shadow-md:  0 20px 60px rgba(0,0,0,0.55);
  --shadow-glow: 0 0 24px rgba(124,92,255,.35);
}


/* Root override at small breakpoint — extracted from the original style.css (line 774) */
@media (max-width: 520px) {
  :root { --px: 16px; }
}