/* Design System Variables - White Company Inspired */

:root {
  /* Primary Palette - Soft, Gentle, Storybook */
  --color-cream: #F9F6F1;
  --color-soft-beige: #EAE3D7;
  --color-cloud-blue: #D9E6F2;
  --color-gentle-gray: #C8C3BB;
  --color-warm-white: #FFFFFF;

  /* Accent Colors */
  --color-moon-gold: #F4D5A6;
  --color-star-gold: #E8C68D;
  --color-soft-shadow: #A39B91;

  /* Text Colors */
  --color-text-primary: #3D3935;
  --color-text-secondary: #6B6460;
  --color-text-muted: #948F8A;

  /* Interactive */
  --color-link: #7AA3C0;
  --color-link-hover: #5A8AA8;
  --color-button-primary: #E8C68D;
  --color-button-text: #3D3935;

  /* Borders & Dividers */
  --color-border: #E5DFD6;
  --color-divider: #F0EBE3;

  /* Spacing */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;
  --spacing-2xl: 48px;
  --spacing-3xl: 64px;

  /* Typography */
  --font-family-primary: 'Playfair Display', Georgia, serif;
  --font-family-secondary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --font-size-xs: 0.75rem;    /* 12px */
  --font-size-sm: 0.875rem;   /* 14px */
  --font-size-base: 1rem;     /* 16px */
  --font-size-lg: 1.125rem;   /* 18px */
  --font-size-xl: 1.5rem;     /* 24px */
  --font-size-2xl: 2rem;      /* 32px */
  --font-size-3xl: 2.5rem;    /* 40px */
  --font-size-4xl: 3rem;      /* 48px */

  /* Borders & Radii */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-soft: 0 2px 8px rgba(61, 57, 53, 0.08);
  --shadow-medium: 0 4px 16px rgba(61, 57, 53, 0.12);
  --shadow-large: 0 8px 24px rgba(61, 57, 53, 0.16);

  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-normal: 300ms ease;
  --transition-slow: 500ms ease;

  /* Container */
  --container-max-width: 1200px;

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