/* ===== Design Tokens - Valentine Michel Photographie ===== */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Playfair+Display:wght@400;500;600;700&display=swap');

:root {
  /* Typography */
  --ff-sans: 'Inter', 'Manrope', system-ui, sans-serif;
  --ff-display: 'Playfair Display', 'Cormorant Garamond', serif;

  /* Colors */
  --c-bg: #FAFAF8;
  --c-surface: #FFFFFF;
  --c-text: #1A1A1A;
  --c-text-muted: #4A4A4A;
  --c-border: #E7E5E4;
  --c-accent: #008577;
  --c-accent-hover: #006157;
  --c-accent-light: #e8f2f1;
  --c-success: #2F855A;
  --c-warning: #B7791F;
  --c-error: #C53030;
  --c-gray-50: #F9FAFB;
  --c-gray-100: #F3F4F6;
  --c-gray-200: #E5E7EB;
  --c-gray-600: #4B5563;
  --c-gray-700: #374151;
  --c-gray-900: #111827;
  --c-white: #FFFFFF;
  --c-black: #000000;

  /* Spacing (8px base) */
  --sp-1: 0.25rem;   /* 4 */
  --sp-2: 0.5rem;    /* 8 */
  --sp-3: 1rem;      /* 16 */
  --sp-4: 1.5rem;    /* 24 */
  --sp-5: 2rem;      /* 32 */
  --sp-6: 3rem;      /* 48 */
  --sp-8: 4rem;      /* 64 */

  /* Radius */
  --r-sm: 0.5rem;
  --r-md: 0.75rem;
  --r-lg: 1rem;
  --r-full: 9999px;

  /* Typography Scale */
  --text-xs: 0.8125rem;   /* 13px */
  --text-sm: 0.875rem;    /* 14px */
  --text-base: 1rem;      /* 16px */
  --text-lg: 1.125rem;    /* 18px */
  --text-xl: 1.25rem;     /* 20px */
  --text-2xl: 1.375rem;   /* 22px */
  --text-3xl: 1.625rem;   /* 26px */
  --text-4xl: 1.875rem;   /* 30px */
  --text-5xl: 2rem;       /* 32px */
  --text-6xl: 2.75rem;    /* 44px */
  --text-7xl: 4rem;       /* 64px */

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(0,0,0,.05);
  --shadow-md: 0 4px 6px -1px rgba(0,0,0,.1), 0 2px 4px -2px rgba(0,0,0,.1);
  --shadow-lg: 0 10px 15px -3px rgba(0,0,0,.1), 0 4px 6px -4px rgba(0,0,0,.1);

  /* Breakpoints (for reference - used in media queries) */
  --bp-sm: 640px;
  --bp-md: 768px;
  --bp-lg: 1024px;
  --bp-xl: 1280px;

  /* Grid */
  --grid-margin-mobile: 1.25rem;
  --grid-margin-tablet: 3rem;
  --grid-margin-desktop: 4.5rem;
  --grid-gap: 1.5rem;
  --grid-gap-mobile: 1rem;

  /* Transitions */
  --ease-out: cubic-bezier(.4,0,.2,1);
  --duration: 180ms;
}