:root {
  --bg-base:        #050505;
  --bg-card:        #0C0C0C;
  --bg-section-alt: #080808;
  --bg-ink:         #050505;
  --bg-glass:       rgba(5, 5, 5, 0.85);
  --bg-elevated:    #111111;
  --bg-band:        #050505;

  --border:         rgba(240, 238, 233, 0.08);
  --border-strong:  rgba(240, 238, 233, 0.18);

  --accent:         #C8F542;
  --accent-hover:   #D8FF62;
  --accent-bright:  #C8F542;
  --accent-soft:    rgba(200, 245, 66, 0.12);
  --accent-glow:    rgba(200, 245, 66, 0.25);
  --accent-subtle:  rgba(200, 245, 66, 0.06);
  --accent-ghost:   rgba(200, 245, 66, 0.12);

  --gradient-hero:  radial-gradient(ellipse 80% 60% at 80% 20%, rgba(200, 245, 66, 0.07), transparent 55%);
  --gradient-warm:  none;

  --text-primary:   #F0EEE9;
  --text-secondary: #9A9890;
  --text-muted:     #5C5A56;
  --text-inverse:   #050505;

  --on-accent:        #050505;
  --on-accent-muted:  rgba(5, 5, 5, 0.35);
  --on-accent-stroke: rgba(5, 5, 5, 0.5);
  --on-accent-border: rgba(5, 5, 5, 0.25);
  --on-accent-light:  #F0EEE9;

  --grid-line:        rgba(240, 238, 233, 0.03);
  --hero-index-stroke: rgba(240, 238, 233, 0.06);
  --orb-1:            rgba(200, 245, 66, 0.12);
  --orb-2:            rgba(200, 245, 66, 0.05);

  --overlay-fade:   rgba(5, 5, 5, 0.85);
  --overlay-strong: rgba(5, 5, 5, 0.95);
  --overlay-mid:    rgba(5, 5, 5, 0.75);
  --overlay-ghost:  rgba(5, 5, 5, 0.35);
  --overlay-stroke: rgba(5, 5, 5, 0.25);

  --img-filter:         grayscale(28%) contrast(1.04);
  --img-filter-hover:   grayscale(8%) contrast(1.02);
  --img-filter-ui:      grayscale(20%) contrast(1.05);
  --img-filter-ui-hover: grayscale(5%) contrast(1.02);

  --success: #C8F542;
  --warning: #F5A623;
  --error:   #FF5C5C;

  --shadow-sm:  none;
  --shadow-md:  0 20px 60px rgba(0, 0, 0, 0.5);
  --shadow-lg:  0 40px 100px rgba(0, 0, 0, 0.6);

  --section-pad:    140px;
  --section-pad-sm: 88px;
  --card-pad:       32px;
  --gap:            24px;
  --radius-card:    0;
  --radius-btn:     0;
  --radius-pill:    999px;
  --max-w:          1200px;
  --max-w-narrow:   640px;
  --max-w-wide:     1440px;

  --font-display: 'Syne', system-ui, sans-serif;
  --font-body:    'Manrope', system-ui, sans-serif;
  --font-mono:    'IBM Plex Mono', monospace;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --transition: 0.6s var(--ease-out);
}

[data-theme="light"] {
  color-scheme: light;

  --bg-base:        #FFFFFF;
  --bg-card:        #FFFFFF;
  --bg-section-alt: #F4F4F1;
  --bg-ink:         #111110;
  --bg-glass:       rgba(255, 255, 255, 0.9);
  --bg-elevated:    #FFFFFF;
  --bg-band:        #FFF4EB;

  --border:         rgba(17, 17, 16, 0.09);
  --border-strong:  rgba(17, 17, 16, 0.16);

  --accent:         #F97316;
  --accent-hover:   #EA580C;
  --accent-bright:  #F97316;
  --accent-soft:    rgba(249, 115, 22, 0.14);
  --accent-glow:    rgba(249, 115, 22, 0.38);
  --accent-subtle:  rgba(249, 115, 22, 0.08);
  --accent-ghost:   rgba(249, 115, 22, 0.22);

  --gradient-hero:  radial-gradient(ellipse 80% 60% at 80% 20%, rgba(249, 115, 22, 0.12), transparent 55%);

  --text-primary:   #111110;
  --text-secondary: #4E4E4A;
  --text-muted:     #82827C;
  --text-inverse:   #FFFFFF;

  --on-accent:        #FFFFFF;
  --on-accent-muted:  rgba(255, 255, 255, 0.72);
  --on-accent-stroke: rgba(255, 255, 255, 0.55);
  --on-accent-border: rgba(255, 255, 255, 0.35);
  --on-accent-light:  #FFF7ED;

  --grid-line:         rgba(17, 17, 16, 0.05);
  --hero-index-stroke: rgba(17, 17, 16, 0.07);
  --orb-1:             rgba(249, 115, 22, 0.18);
  --orb-2:             rgba(249, 115, 22, 0.1);

  --overlay-fade:   rgba(255, 255, 255, 0.88);
  --overlay-strong: rgba(255, 255, 255, 0.98);
  --overlay-mid:    rgba(255, 255, 255, 0.8);
  --overlay-ghost:  rgba(17, 17, 16, 0.06);
  --overlay-stroke: rgba(17, 17, 16, 0.12);

  --img-filter:         brightness(1.02) contrast(1.03) saturate(1.04);
  --img-filter-hover:   brightness(1.05) contrast(1.02) saturate(1.06);
  --img-filter-ui:      brightness(0.98) contrast(1.04) saturate(0.96);
  --img-filter-ui-hover: brightness(1) contrast(1.02) saturate(1);

  --shadow-sm:  0 1px 4px rgba(17, 17, 16, 0.06);
  --shadow-md:  0 14px 44px rgba(17, 17, 16, 0.08);
  --shadow-lg:  0 28px 72px rgba(17, 17, 16, 0.1);
}