/*
 * FureverSong Design System Variables
 * CHANGE THESE TO CUSTOMIZE YOUR ENTIRE SITE!
 *
 * COLOR PALETTE PHILOSOPHY - "SOFT HAVEN" ★
 * Optimized for trust, warmth & conversion
 *
 * - Warm Cream (#FAF7F2) - Main background, feels like a 'safe space'
 * - Slate (#4A5568) - Headers, buttons, trust elements
 * - Soft Gray (#718096) - Body text, secondary elements
 * - Muted Gold (#C9A962) - CTAs, highlights, 'precious' feeling
 *
 * PSYCHOLOGICAL SIGNALS:
 * ✓ No pure white - Avoids clinical feeling (vet's office)
 * ✓ No bright colors - Respects profound grief
 * ✓ Warm undertones only - Creates the 'safe space' they need
 * ✓ Gold accents - Signals 'precious memories'
 * ✓ Sophisticated palette - Respects dignity of loss
 */

:root {
  /* === PRIMARY COLORS === */
  /* Soft Haven Color Scheme - Trust, Warmth, Conversion */
  --slate-primary: #4A5568;     /* Slate - headers, buttons, trust elements */
  --slate-dark: #3a4555;        /* Darker slate for hover states */
  --slate-light: #5a6578;       /* Lighter slate for accents */
  --slate-lighter: #6b7589;     /* Even lighter for subtle elements */
  --slate-light-bg: #f5f7f9;    /* Very light slate background */
  --slate-border: #d4d8de;      /* Slate border color */

  /* === BACKGROUND COLORS === */
  --beige-warm-1: #FAF7F2;      /* Warm cream - main background */
  --beige-warm-2: #FAF7F2;      /* Warm cream - consistent palette */
  --beige-peachy: #FAF7F2;      /* Warm cream - no peachy tints */
  --cream: #FAF7F2;             /* Warm cream base */
  --white: #ffffff;
  --black: #000000;

  /* === TEXT COLORS === */
  --text-primary: #4A5568;      /* Slate - headers, primary text */
  --text-secondary: #718096;    /* Soft Gray - body text, secondary elements */
  --text-tertiary: #8892a3;     /* Lighter gray for subtle text */
  --text-muted: #9ca3af;        /* Very light gray for less important text */

  /* === ACCENT COLORS === */
  --gold-accent: #C9A962;       /* Muted Gold - CTAs, highlights, 'precious' feeling */
  --gold-light: #d9b972;        /* Lighter gold */
  --gold-dark: #b99952;         /* Darker gold */

  /* Legacy orange names (mapped to gold for compatibility) */
  --orange-accent: var(--gold-accent);
  --orange-light: var(--gold-light);
  --orange-dark: var(--gold-dark);

  /* === BUTTON COLORS === */
  --btn-primary-bg: var(--slate-primary);     /* Slate for trust & CTAs */
  --btn-primary-hover: var(--slate-dark);     /* Darker slate on hover */
  --btn-primary-text: var(--white);

  /* === SPACING === */
  --spacing-xs: 0.25rem;    /* 4px */
  --spacing-sm: 0.5rem;     /* 8px */
  --spacing-md: 1rem;       /* 16px */
  --spacing-lg: 1.5rem;     /* 24px */
  --spacing-xl: 2rem;       /* 32px */
  --spacing-2xl: 3rem;      /* 48px */
  --spacing-3xl: 4rem;      /* 64px */

  /* === BORDER RADIUS === */
  --radius-sm: 0.25rem;     /* 4px */
  --radius-md: 0.5rem;      /* 8px */
  --radius-lg: 0.75rem;     /* 12px */
  --radius-xl: 1rem;        /* 16px */
  --radius-2xl: 1.5rem;     /* 24px */
  --radius-full: 9999px;

  /* === SHADOWS === */
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1);
  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1);

  /* === TRANSITIONS === */
  --transition-fast: 150ms;
  --transition-base: 200ms;
  --transition-slow: 300ms;
  --transition-timing: cubic-bezier(0.4, 0, 0.2, 1);

  /* === TYPOGRAPHY === */
  --font-heading: 'Playfair Display', serif;
  --font-body: 'DM Sans', sans-serif;
  --font-serif: 'Source Serif 4', serif;

  /* === BREAKPOINTS (for reference in JS) === */
  --breakpoint-sm: 640px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 1024px;
  --breakpoint-xl: 1280px;

  /* === Z-INDEX LAYERS === */
  --z-base: 0;
  --z-elevated: 10;
  --z-sticky: 50;
  --z-modal: 100;
  --z-overlay: 200;
}

/* Dark mode support (optional - for future) */
@media (prefers-color-scheme: dark) {
  :root {
    /* Uncomment to add dark mode */
    /* --text-primary: #f9fafb; */
    /* --white: #1f2937; */
    /* etc... */
  }
}

/*
 * QUICK CUSTOMIZATION GUIDE:
 *
 * "SOFT HAVEN" Color Philosophy ★ Optimized for Conversion:
 * - Warm Cream (#FAF7F2) - Safe, comforting background
 * - Slate (#4A5568) - Trust elements, headers, buttons
 * - Soft Gray (#718096) - Easy-reading body text
 * - Muted Gold (#C9A962) - Precious, premium CTAs & highlights
 *
 * Why This Palette Converts:
 * ✓ No clinical white (avoids vet's office feeling)
 * ✓ Sophisticated tones (respects dignity of loss)
 * ✓ Warm undertones (creates emotional safety)
 * ✓ Gold accents (signals precious memories)
 *
 * To change your brand color:
 * 1. Update --slate-primary (headers, buttons) and --gold-accent (CTAs)
 * 2. All buttons, icons, accents update automatically
 *
 * To change backgrounds:
 * 1. Update --slate-light-bg, --beige-warm-1, --beige-warm-2
 * 2. All sections update automatically
 *
 * To change fonts:
 * 1. Replace font files in /fonts/
 * 2. Update --font-heading and --font-body
 * 3. Update fonts.css with new @font-face
 */