:root {
  /* Backgrounds */
  --color-bg-base:        #0a0a0a;
  --color-bg-elevated:    #111111;
  --color-bg-card:        #1a1a1a;
  --color-bg-card-hover:  #212121;
  --color-bg-modal:       #141414;
  --color-bg-section-alt: #0e0e0e;

  /* Text */
  --color-text-primary:   #f0ece4;
  --color-text-secondary: #9a9080;
  --color-text-muted:     #5a5248;
  --color-text-inverse:   #0a0a0a;

  /* Accent – Rose-Gold */
  --color-accent:         #c9a96e;
  --color-accent-light:   #e8c98a;
  --color-accent-dark:    #a8863d;
  --color-accent-subtle:  rgba(201, 169, 110, 0.12);
  --color-accent-border:  rgba(201, 169, 110, 0.28);

  /* Borders */
  --border-subtle:  1px solid rgba(255, 255, 255, 0.06);
  --border-accent:  1px solid var(--color-accent-border);
  --color-overlay:  rgba(0, 0, 0, 0.85);

  /* Typography */
  --font-family:        'IBM Plex Sans', sans-serif;
  --font-size-xs:       0.75rem;
  --font-size-sm:       0.875rem;
  --font-size-base:     1rem;
  --font-size-lg:       1.125rem;
  --font-size-xl:       1.375rem;
  --font-size-2xl:      1.75rem;
  --font-size-3xl:      2.5rem;
  --font-size-4xl:      3.5rem;
  --font-size-display:  clamp(3rem, 7vw, 5.5rem);

  --font-weight-regular: 400;
  --font-weight-medium:  500;
  --font-weight-bold:    700;

  --line-height-tight:  1.1;
  --line-height-snug:   1.35;
  --line-height-base:   1.65;

  --letter-spacing-wide: 0.08em;

  /* Spacing (8px base) */
  --space-1:   0.5rem;
  --space-2:   1rem;
  --space-3:   1.5rem;
  --space-4:   2rem;
  --space-5:   2.5rem;
  --space-6:   3rem;
  --space-8:   4rem;
  --space-10:  5rem;
  --space-12:  6rem;
  --space-16:  8rem;

  /* Borders & Radius */
  --radius-sm:   4px;
  --radius-base: 8px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-card:   0 2px 20px rgba(0, 0, 0, 0.45);
  --shadow-modal:  0 8px 60px rgba(0, 0, 0, 0.75);
  --shadow-button: 0 4px 20px rgba(201, 169, 110, 0.25);

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

  /* Layout */
  --container-max: 1200px;
  --container-pad: var(--space-4);
  --nav-height:    72px;
}

@media (max-width: 768px) {
  :root {
    --container-pad: var(--space-2);
    --nav-height: 60px;
  }
}