/**
 * Design tokens. The dynamic color/font values are also injected inline from
 * the Customizer (see inc/helpers.php::dreamphoto_dynamic_css); the values here
 * are the static defaults and the full scale the theme builds on.
 */
:root {
  /* Brand palette — Dreams Photography logo: sky blue, warm grays, white. */
  --color-primary: #1FA3DC;
  --color-primary-hover: #1892C4;
  --color-secondary: #5BC4F0;
  --color-secondary-hover: #45B7E8;
  --color-dark: #555555;
  --color-text: #333333;
  --color-text-muted: #8A8A8A;
  --color-bg: #FFFFFF;
  --color-section: #F4F9FC;
  --color-border: #DCE8F0;
  --color-success: #4CAF50;
  --color-error: #D32F2F;
  --color-white: #FFFFFF;
  --color-overlay: rgba(34, 58, 72, 0.52);

  /* Typography — serif lockup + clean sans body (matches logo pairing). */
  --font-heading: 'Cormorant Garamond', Georgia, serif;
  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-brand-sans: 'Inter', system-ui, sans-serif;

  --fs-xs: 0.8125rem;   /* 13px */
  --fs-sm: 0.9375rem;   /* 15px */
  --fs-base: 1rem;      /* 16px */
  --fs-md: 1.125rem;    /* 18px */
  --fs-lg: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  --fs-xl: clamp(1.5rem, 1.2rem + 1.4vw, 2rem);
  --fs-2xl: clamp(1.9rem, 1.4rem + 2.4vw, 2.75rem);
  --fs-3xl: clamp(2.4rem, 1.6rem + 3.6vw, 3.75rem);

  --lh-tight: 1.15;
  --lh-snug: 1.35;
  --lh-base: 1.7;

  /* Spacing scale (8px base). */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --space-10: 8rem;

  /* Layout. */
  --container: 1200px;
  --container-wide: 1440px;
  --container-narrow: 820px;
  --gutter: clamp(1rem, 0.5rem + 2vw, 2rem);

  /* UI — soft, cloud-like corners from the logo mark. */
  --radius-sm: 6px;
  --radius: 12px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-full: 999px;

  --shadow-sm: 0 1px 2px rgba(51, 51, 51, 0.06), 0 1px 3px rgba(31, 163, 220, 0.08);
  --shadow: 0 4px 20px rgba(31, 163, 220, 0.1);
  --shadow-lg: 0 18px 48px rgba(34, 58, 72, 0.12);

  --header-height: 96px;
  --transition-fast: 150ms ease;
  --transition: 250ms ease;
  --transition-slow: 400ms ease;

  --z-header: 100;
  --z-drawer: 200;
  --z-lightbox: 300;
  --z-toast: 400;
}

/* Opt-in dark preference (light-first theme; toggle sets data-theme). */
:root[data-theme='dark'] {
  --color-text: #EDEDED;
  --color-text-muted: #B4B4B4;
  --color-bg: #14181B;
  --color-section: #1B2024;
  --color-border: #2A3136;
  --color-overlay: rgba(0, 0, 0, 0.6);
}