:root {
  /* -- Backgrounds -- */
  --bg-base:        #FAFAF8;
  --bg-surface:     #F3F1EE;
  --bg-card:        #FFFFFF;
  --bg-card-hover:  #FFF8F0;
  --bg-navbar:      rgba(250, 250, 248, 0.88);
  --bg-dark:        #1C1C1E;
  --bg-overlay:     rgba(0, 0, 0, 0.5);

  /* -- Accent Palette -- */
  --accent-primary:       #E8553A;
  --accent-primary-dim:   #C7432B;
  --accent-primary-light: #FFF0EB;
  --accent-secondary:     #6C5CE7;
  --accent-secondary-dim: #5A4BD6;
  --accent-secondary-light: #F0EDFF;
  --accent-tertiary:      #00B894;
  --accent-warning:       #FDCB6E;
  --accent-danger:        #FF6B6B;

  /* -- Text -- */
  --text-primary:   #1C1C1E;
  --text-secondary: #6B6B70;
  --text-muted:     #9B9BA0;
  --text-inverse:   #FFFFFF;

  /* -- Typography -- */
  --font-display:   "Poppins", sans-serif;
  --font-body:      "Inter", sans-serif;
  --fs-hero:        clamp(2.5rem, 6vw, 4rem);
  --fs-2xl:         2.25rem;
  --fs-xl:          1.75rem;
  --fs-lg:          1.25rem;
  --fs-md:          1.125rem;
  --fs-base:        1rem;
  --fs-sm:          0.875rem;
  --fs-xs:          0.75rem;

  /* -- Spacing -- */
  --sp-3xs:  4px;
  --sp-2xs:  8px;
  --sp-xs:   12px;
  --sp-sm:   16px;
  --sp-md:   24px;
  --sp-lg:   32px;
  --sp-xl:   48px;
  --sp-2xl:  80px;
  --sp-3xl:  120px;

  /* -- Borders & Radius -- */
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   20px;
  --radius-xl:   28px;
  --radius-pill: 9999px;
  --border-subtle: 1px solid rgba(0, 0, 0, 0.06);

  /* -- Shadows -- */
  --shadow-sm:  0 1px 3px rgba(0, 0, 0, 0.06);
  --shadow-md:  0 4px 12px rgba(0, 0, 0, 0.08);
  --shadow-lg:  0 8px 30px rgba(0, 0, 0, 0.12);
  --shadow-xl:  0 16px 48px rgba(0, 0, 0, 0.15);
  --glow-sm:   0 0 0 rgba(0, 0, 0, 0);
  --glow-md:   0 0 0 rgba(0, 0, 0, 0);
  --glow-lg:   0 0 0 rgba(0, 0, 0, 0);
  --glow-xl:   0 0 0 rgba(0, 0, 0, 0);

  /* -- Transitions -- */
  --dur-fast:  0.15s;
  --dur-base:  0.3s;
  --dur-slow:  0.5s;
  --ease-out:  cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* -- Layout -- */
  --max-width:  1200px;
  --nav-height: 72px;

  /* -- Project type accents -- */
  --type-engine:  #6C5CE7;
  --type-game:    #E8553A;
  --type-tool:    #00B894;
  --type-infra:   #0984E3;
}

/* ===== Dark Theme ===== */
[data-theme="dark"] {
  --bg-base:        #141418;
  --bg-surface:     #1C1C22;
  --bg-card:        #22222A;
  --bg-card-hover:  #2A2A34;
  --bg-navbar:      rgba(20, 20, 24, 0.92);
  --bg-dark:        #0A0A0E;
  --bg-overlay:     rgba(0, 0, 0, 0.7);

  --accent-primary:       #F06A50;
  --accent-primary-dim:   #E8553A;
  --accent-primary-light: #3A1A14;
  --accent-secondary:     #8B7CF7;
  --accent-secondary-dim: #6C5CE7;
  --accent-secondary-light: #1E1A3A;
  --accent-tertiary:      #00D2A8;
  --accent-warning:       #FDCB6E;

  --text-primary:   #F0F0F2;
  --text-secondary: #A0A0A8;
  --text-muted:     #6B6B74;
  --text-inverse:   #1C1C1E;

  --border-subtle: 1px solid rgba(255, 255, 255, 0.06);

  --shadow-sm:  0 1px 3px rgba(0, 0, 0, 0.2);
  --shadow-md:  0 4px 12px rgba(0, 0, 0, 0.3);
  --shadow-lg:  0 8px 30px rgba(0, 0, 0, 0.4);
  --shadow-xl:  0 16px 48px rgba(0, 0, 0, 0.5);
  --glow-sm:   0 1px 4px rgba(255, 255, 255, 0.06);
  --glow-md:   0 4px 16px rgba(255, 255, 255, 0.1);
  --glow-lg:   0 8px 32px rgba(255, 255, 255, 0.14);
  --glow-xl:   0 16px 48px rgba(255, 255, 255, 0.18);
}