/* ============================================
   Design System — CSS Custom Properties
   ============================================ */

:root {
  /* ---- Color Palette ---- */
  --color-bg-primary:     #0a0a0f;
  --color-bg-secondary:   #12121a;
  --color-bg-elevated:    #1a1a2e;
  --color-border:         rgba(255, 255, 255, 0.06);

  --color-text-primary:   #e8e6e3;
  --color-text-secondary: #9a9a9a;
  --color-text-muted:     #6a6a7a;

  --color-accent:         #8b7ec8;
  --color-accent-warm:    #c4956a;

  /* Gradient palette */
  --gradient-1: #1a0a2e;
  --gradient-2: #0d1b3e;
  --gradient-3: #1a1040;
  --gradient-4: #0a1628;

  /* ---- Typography ---- */
  --font-display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --fs-hero:      clamp(8rem, 20vw, 20rem);
  --fs-h2:        clamp(1.8rem, 3vw, 2.8rem);
  --fs-h3:        clamp(1.2rem, 2vw, 1.5rem);
  --fs-body:      clamp(0.95rem, 1.1vw, 1.1rem);
  --fs-body-lg:   clamp(1.175rem, 1.45vw, 1.375rem);
  --fs-small:     clamp(0.8rem, 0.9vw, 0.9rem);
  --fs-tagline:   clamp(1rem, 1.5vw, 1.3rem);
  --fs-meta:      clamp(0.7rem, 0.8vw, 0.8rem);

  --fw-light:     300;
  --fw-regular:   400;
  --fw-medium:    500;
  --fw-semibold:  600;

  --lh-tight:     1.1;
  --lh-normal:    1.6;
  --lh-relaxed:   1.8;

  --ls-hero:      0.04em;
  --ls-heading:   -0.02em;
  --ls-body:      0.01em;
  --ls-caps:      0.15em;

  /* ---- Spacing (8px base) ---- */
  --space-xs:     0.5rem;
  --space-sm:     1rem;
  --space-md:     2rem;
  --space-lg:     4rem;
  --space-xl:     6rem;
  --space-2xl:    10rem;

  /* ---- Layout ---- */
  --container-max:  72rem;
  --container-pad:  clamp(0.75rem, 4vw, 4rem);

  /* ---- Animation ---- */
  --ease-out-expo:   cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-quart:  cubic-bezier(0.25, 1, 0.5, 1);
  --duration-reveal:  0.8s;
  --duration-gradient: 20s;

  /* ---- Grain ---- */
  --grain-opacity: 0.04;

  /* ---- Theme transition ---- */
  --theme-transition: background-color 0.6s ease, color 0.5s ease, border-color 0.5s ease, box-shadow 0.5s ease;
}

/* ============================================
   Light Theme
   ============================================ */

[data-theme="light"] {
  --color-bg-primary:     #f5f3f0;
  --color-bg-secondary:   #eae7e2;
  --color-bg-elevated:    #dfdbd5;
  --color-border:         rgba(0, 0, 0, 0.08);

  --color-text-primary:   #1a1a2e;
  --color-text-secondary: #4a4a5a;
  --color-text-muted:     #7a7a8a;

  --color-accent:         #6b5eaa;
  --color-accent-warm:    #a07548;

  /* Gradient palette — soft pastels */
  --gradient-1: #d8d0e8;
  --gradient-2: #c8d4e8;
  --gradient-3: #d0c8e0;
  --gradient-4: #e0dce8;

  --grain-opacity: 0.03;
}