@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=DM+Sans:wght@300;400;500;600;700&display=swap');

:root {
  /* Light Mode Default (clean beauty) */
  --color-bg: hsl(0, 0%, 100%);
  --color-bg-alt: hsl(270, 25%, 97%);
  --color-bg-card: hsl(0, 0%, 100%);
  --color-text: hsl(0, 0%, 12%);
  --color-text-muted: hsl(0, 0%, 50%);
  --color-text-light: hsl(0, 0%, 65%);
  --color-accent: hsl(270, 45%, 55%);       /* Soft lavender/purple */
  --color-accent-hover: hsl(270, 45%, 45%);
  --color-accent-light: hsl(270, 40%, 95%);
  --color-secondary: hsl(340, 55%, 58%);    /* Rose pink */
  --color-secondary-hover: hsl(340, 55%, 48%);
  --color-secondary-light: hsl(340, 40%, 95%);
  --color-success: hsl(160, 50%, 42%);
  --color-border: hsl(0, 0%, 90%);
  --color-shadow: hsla(270, 20%, 30%, 0.06);
  --color-overlay: hsla(0, 0%, 0%, 0.5);
  --color-header-bg: hsla(0, 0%, 100%, 0.98);
  --color-announcement: hsl(270, 45%, 55%);
  --color-announcement-text: hsl(0, 0%, 100%);
  
  --font-heading: 'Cormorant Garamond', serif;
  --font-body: 'DM Sans', sans-serif;
  --fs-xs: clamp(0.7rem, 0.65rem + 0.25vw, 0.8rem);
  --fs-sm: clamp(0.8rem, 0.75rem + 0.3vw, 0.9rem);
  --fs-base: clamp(0.9rem, 0.85rem + 0.25vw, 1rem);
  --fs-md: clamp(1rem, 0.95rem + 0.3vw, 1.15rem);
  --fs-lg: clamp(1.2rem, 1.05rem + 0.6vw, 1.5rem);
  --fs-xl: clamp(1.5rem, 1.2rem + 1vw, 2rem);
  --fs-2xl: clamp(1.8rem, 1.4rem + 1.5vw, 2.8rem);
  --fs-3xl: clamp(2.2rem, 1.6rem + 2.5vw, 3.8rem);
  --fw-light: 300; --fw-regular: 400; --fw-medium: 500;
  --fw-semibold: 600; --fw-bold: 700;
  
  --space-xs: 0.25rem; --space-sm: 0.5rem; --space-md: 1rem;
  --space-lg: 1.5rem; --space-xl: 2rem; --space-2xl: 3rem;
  --space-3xl: 4rem; --space-4xl: 6rem;
  --space-section: clamp(4rem, 3rem + 4vw, 7rem);
  
  --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px;
  --radius-xl: 20px; --radius-full: 9999px;
  
  --shadow-sm: 0 1px 2px var(--color-shadow);
  --shadow-md: 0 4px 12px var(--color-shadow);
  --shadow-lg: 0 8px 24px var(--color-shadow);
  --shadow-xl: 0 12px 40px var(--color-shadow);
  
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
  --transition-slow: 400ms ease;
  --transition-spring: 500ms cubic-bezier(0.34, 1.56, 0.64, 1);
  
  --max-width: 1280px;
  --header-height: 64px;
  --announcement-height: 36px;
}

/* Dark Mode */
[data-theme="dark"] {
  --color-bg: hsl(270, 15%, 8%);
  --color-bg-alt: hsl(270, 12%, 12%);
  --color-bg-card: hsl(270, 12%, 14%);
  --color-text: hsl(270, 10%, 92%);
  --color-text-muted: hsl(270, 5%, 60%);
  --color-text-light: hsl(270, 5%, 45%);
  --color-accent: hsl(270, 50%, 65%);
  --color-accent-hover: hsl(270, 50%, 58%);
  --color-accent-light: hsl(270, 30%, 18%);
  --color-secondary: hsl(340, 50%, 62%);
  --color-secondary-hover: hsl(340, 50%, 55%);
  --color-secondary-light: hsl(340, 30%, 18%);
  --color-border: hsl(270, 10%, 22%);
  --color-shadow: hsla(270, 20%, 5%, 0.4);
  --color-overlay: hsla(0, 0%, 0%, 0.75);
  --color-header-bg: hsla(270, 15%, 8%, 0.98);
  --color-announcement: hsl(270, 35%, 20%);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}