:root {
  /* Backgrounds */
  --bg:           #F7F8FC;   /* Deep Reverie Light bg */
  --bg-surface:   #EBEDF5;   /* Deep Reverie Light surface */
  --bg-elevated:  #FFFFFF;   /* pure white */
  --bg-transparent: rgba(247, 248, 252, 0);

  /* Text */
  --text-primary:   #1A1B26; /* Deep Reverie Light text */
  --text-secondary: #4E5370; /* Deep Reverie Light text-secondary */
  --text-muted:     #8288A5; /* Deep Reverie Light text-muted */

  /* Accents */
  --accent:           #6644E6; /* Deep, vibrant purple */
  --accent-secondary: #0284C7; /* Rich ocean blue */
  --accent-tertiary:  #D8B4FE; /* Soft bright lilac */
  --accent-fg:        #FFFFFF; /* White text over deep accents */

  /* Structure */
  --border:   #D4D8E8; /* Cool light slate border */
  --shadow:   rgba(26, 27, 38, 0.05);
  --shadow-lg: rgba(26, 27, 38, 0.10);

  /* Typography */
  --font-heading: 'Lora', Georgia, serif;
  --font-body:    'Nunito', system-ui, sans-serif;

  /* Spacing (4px base) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  /* Radii */
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-pill: 999px;

  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
  --transition-slow: 400ms ease;
}

[data-theme="dark"] {
  /* Backgrounds */
  --bg:           #15161C;   /* Deep Reverie bg */
  --bg-surface:   #1F212E;   /* Deep Reverie surface */
  --bg-elevated:  #2E3145;   /* Deep Reverie elevated */
  --bg-transparent: rgba(21, 22, 28, 0);

  /* Text */
  --text-primary:   #E5E7F6; /* Deep Reverie text */
  --text-secondary: #A7ACC8; /* Deep Reverie text-secondary */
  --text-muted:     #757A98; /* Deep Reverie text-muted */

  /* Accents */
  --accent:           #9D84F7; /* Deep Reverie accent */
  --accent-secondary: #63C7FA; /* Deep Reverie accent-secondary */
  --accent-tertiary:  #243E8C; /* Deep Reverie accent-tertiary */
  --accent-fg:        #15161C; /* Dark text for contrast against bright purple accent */

  /* Structure */
  --border:   #3A3F58; /* Cool slate border */
  --shadow:   rgba(0, 0, 0, 0.25);
  --shadow-lg: rgba(0, 0, 0, 0.45);
}