/**
 * Soft Flames Design Tokens
 *
 * Warm Ivory × Muted Gold × Charcoal
 * Fluid Spacing, WCAG 2.2 AA Contrast Compliance
 */

:root {
  /* ----------------------------------------------------
   * 1. Brand & Core Color Tokens
   * ---------------------------------------------------- */
  --sf-color-gold: #C5A059;              /* Primary Brand Gold (Backgrounds, Badges, Highlights) */
  --sf-color-gold-light: #CBA65E;        /* Subtle Light Gold */
  --sf-color-gold-accessible: #88662F;   /* Contrast: 5.27:1 on #FFF (WCAG AA text/links) */
  --sf-color-gold-dark: #6C5124;         /* Deep Gold for Active/Hover states */

  --sf-color-bg: #FDFBF7;                 /* Warm Ivory primary background */
  --sf-color-bg-alt: #F8F6F2;             /* Warm section alternate */
  --sf-color-surface: #FFFFFF;            /* Cards, drawers, form inputs */
  --sf-color-surface-hover: #FCFBF9;

  --sf-color-heading: #1A1A1A;            /* Charcoal headings (17.5:1 contrast on #FDFBF7) */
  --sf-color-text: #474747;               /* Balanced body text (7.8:1 contrast on #FDFBF7) */
  --sf-color-text-muted: #6B7280;         /* Subtitles, secondary metadata */
  --sf-color-text-light: #9CA3AF;

  --sf-color-dark: #1C1C1C;               /* Dark footer background */
  --sf-color-dark-alt: #262626;
  --sf-color-dark-text: #E5E7EB;

  --sf-color-border: #E5E2DC;             /* Warm soft border */
  --sf-color-border-light: #F0EDE8;
  --sf-color-border-focus: #88662F;       /* Visible high-contrast focus ring */

  --sf-color-sale: #B91C1C;               /* Sale badge deep crimson */
  --sf-color-success: #15803D;

  /* ----------------------------------------------------
   * 2. Typography Tokens
   * ---------------------------------------------------- */
  --sf-font-heading: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --sf-font-body: 'Onest', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --sf-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  --sf-line-height-tight: 1.15;
  --sf-line-height-heading: 1.25;
  --sf-line-height-body: 1.6;

  /* Fluid Typography Scales */
  --sf-text-xs: 0.75rem;    /* 12px */
  --sf-text-sm: 0.875rem;   /* 14px */
  --sf-text-base: 1rem;     /* 16px */
  --sf-text-lg: 1.125rem;   /* 18px */
  --sf-text-xl: 1.25rem;    /* 20px */
  --sf-text-2xl: 1.5rem;    /* 24px */
  --sf-text-3xl: 1.875rem;  /* 30px */
  --sf-text-4xl: clamp(2rem, 4vw, 2.75rem);   /* 32-44px */
  --sf-text-5xl: clamp(2.5rem, 5vw, 3.5rem);  /* 40-56px */

  /* ----------------------------------------------------
   * 3. Spacing System (4px / 8px grid)
   * ---------------------------------------------------- */
  --sf-space-1: 0.25rem;   /* 4px */
  --sf-space-2: 0.5rem;    /* 8px */
  --sf-space-3: 0.75rem;   /* 12px */
  --sf-space-4: 1rem;      /* 16px */
  --sf-space-5: 1.25rem;   /* 20px */
  --sf-space-6: 1.5rem;    /* 24px */
  --sf-space-8: 2rem;      /* 32px */
  --sf-space-10: 2.5rem;   /* 40px */
  --sf-space-12: 3rem;     /* 48px */
  --sf-space-16: 4rem;     /* 64px */
  --sf-space-20: 5rem;     /* 80px */
  --sf-space-24: 6rem;     /* 96px */

  /* ----------------------------------------------------
   * 4. Layout, Radii & Shadows
   * ---------------------------------------------------- */
  --sf-container-width: 1320px;
  --sf-container-narrow: 840px;
  --sf-gutter: clamp(1rem, 3vw, 2rem);

  --sf-radius-xs: 2px;
  --sf-radius-sm: 4px;
  --sf-radius-md: 8px;
  --sf-radius-lg: 12px;
  --sf-radius-full: 9999px;

  --sf-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --sf-shadow-md: 0 4px 12px -1px rgba(26, 26, 26, 0.08);
  --sf-shadow-lg: 0 12px 28px -4px rgba(26, 26, 26, 0.12);

  --sf-transition: 200ms cubic-bezier(0.16, 1, 0.3, 1);
  --sf-transition-slow: 350ms cubic-bezier(0.16, 1, 0.3, 1);
}