/*
 * 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 size tokens — mobile-first, desktop overrides via media query */
  --text-hero: 32px;     /* Homepage hero headline only */
  --text-h1: 28px;       /* Page titles */
  --text-h2: 24px;       /* Section titles */
  --text-h3: 18px;       /* Subsection titles, FAQ questions */
  --text-pull: 18px;     /* Testimonial quotes (Playfair italic) */
  --text-lead: 17px;     /* Hero subtitles, intro paragraphs */
  --text-body: 16px;     /* All body text — NEVER below this on mobile */
  --text-cta: 16px;      /* All button text */
  --text-input: 16px;    /* All form inputs — prevents iOS zoom */
  --text-sm: 14px;       /* Author names, timestamps, badges */
  --text-xs: 12px;       /* Legal, Stripe line, step indicators */
  --text-price: 22px;    /* Primary price display */

  /* Font weight tokens */
  --weight-normal: 400;
  --weight-medium: 500;
  --weight-semibold: 600;

  /* === 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;
}

/* Desktop font-size overrides */
@media (min-width: 768px) {
  :root {
    --text-hero: 48px;
    --text-h1: 36px;
    --text-h2: 30px;
    --text-h3: 20px;
    --text-pull: 20px;
    --text-lead: 18px;
    /* body, cta, input, sm, xs, price stay the same on desktop */
  }
}

/* Dark mode support — uncomment and populate when ready
@media (prefers-color-scheme: dark) {
  :root {
    --text-primary: #f9fafb;
    --white: #1f2937;
  }
}
*/

/*
 * 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
 */

/* === FONT UTILITY CLASSES === */
.font-playfair {
  font-family: 'Playfair Display', serif;
}

.font-dm-sans {
  font-family: 'DM Sans', sans-serif;
}