/* ==========================================================================
   Glow & Gather — Design Tokens
   All CSS custom properties for the theme.
   This is the ONLY file that may contain hardcoded color values.
   ========================================================================== */

:root {
  /* -------------------------------------------------------------------------
     Colors — Primary
     ------------------------------------------------------------------------- */
  --color-off-white: #FAFAF9;
  --color-charcoal: #2D2D2D;
  --color-beige: #E5D0C3;
  --color-beige-dark: #C4A694;

  /* -------------------------------------------------------------------------
     Colors — Beige Scale
     ------------------------------------------------------------------------- */
  --color-beige-50: #FAF6F3;
  --color-beige-100: #F3EAE3;
  --color-beige-200: #E5D0C3;
  --color-beige-300: #D4B9A8;
  --color-beige-400: #C4A694;
  --color-beige-500: #A8856E;
  --color-beige-600: #8C6B55;

  /* -------------------------------------------------------------------------
     Colors — Charcoal Scale
     ------------------------------------------------------------------------- */
  --color-charcoal-100: #6B6B6B;
  --color-charcoal-200: #4A4A4A;
  --color-charcoal-300: #2D2D2D;
  --color-charcoal-400: #1A1A1A;

  /* -------------------------------------------------------------------------
     Colors — Seasonal Accents
     ------------------------------------------------------------------------- */
  --color-fall: #B5653B;
  --color-winter: #8AACB8;
  --color-spring: #D4A96A;
  --color-clean: #A3B18A;

  /* -------------------------------------------------------------------------
     Colors — Functional
     ------------------------------------------------------------------------- */
  --color-success: #6B8F5E;
  --color-warning: #C4943A;
  --color-error: #B04A4A;
  --color-info: #6A8EA0;

  /* -------------------------------------------------------------------------
     Colors — Surfaces & Overlays
     ------------------------------------------------------------------------- */
  --color-white: #FFFFFF;
  --color-warm-gray: #F5F0EC;
  --overlay: rgba(45, 45, 45, 0.30);
  --overlay-dark: rgba(45, 45, 45, 0.60);

  /* -------------------------------------------------------------------------
     Typography — Font Families
     ------------------------------------------------------------------------- */
  --font-heading: "Playfair Display", Georgia, "Times New Roman", serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* -------------------------------------------------------------------------
     Typography — Font Sizes (modular scale)
     ------------------------------------------------------------------------- */
  --font-size-xs: 0.75rem;    /* 12px */
  --font-size-sm: 0.875rem;   /* 14px */
  --font-size-base: 1rem;     /* 16px */
  --font-size-md: 1.125rem;   /* 18px */
  --font-size-lg: 1.25rem;    /* 20px */
  --font-size-xl: 1.5rem;     /* 24px */
  --font-size-2xl: 1.875rem;  /* 30px */
  --font-size-3xl: 2.25rem;   /* 36px */
  --font-size-4xl: 3rem;      /* 48px */
  --font-size-5xl: 3.5rem;    /* 56px */

  /* -------------------------------------------------------------------------
     Typography — Font Weights
     ------------------------------------------------------------------------- */
  --font-weight-normal: 400;
  --font-weight-medium: 500;

  /* -------------------------------------------------------------------------
     Typography — Line Heights
     ------------------------------------------------------------------------- */
  --line-height-tight: 1.2;
  --line-height-base: 1.6;
  --line-height-loose: 1.8;

  /* -------------------------------------------------------------------------
     Typography — Letter Spacing
     ------------------------------------------------------------------------- */
  --letter-spacing-tight: -0.01em;
  --letter-spacing-normal: 0;
  --letter-spacing-wide: 0.05em;
  --letter-spacing-wider: 0.1em;

  /* -------------------------------------------------------------------------
     Spacing — 8px base scale
     ------------------------------------------------------------------------- */
  --space-1: 0.25rem;   /* 4px */
  --space-2: 0.5rem;    /* 8px */
  --space-3: 0.75rem;   /* 12px */
  --space-4: 1rem;      /* 16px */
  --space-5: 1.25rem;   /* 20px */
  --space-6: 1.5rem;    /* 24px */
  --space-8: 2rem;      /* 32px */
  --space-10: 2.5rem;   /* 40px */
  --space-12: 3rem;     /* 48px */
  --space-16: 4rem;     /* 64px */
  --space-20: 5rem;     /* 80px */
  --space-24: 6rem;     /* 96px */

  /* -------------------------------------------------------------------------
     Layout
     ------------------------------------------------------------------------- */
  --max-width: 1280px;
  --container-padding: var(--space-4);

  /* -------------------------------------------------------------------------
     Borders
     ------------------------------------------------------------------------- */
  --radius-sm: 0.25rem;   /* 4px */
  --radius-md: 0.5rem;    /* 8px */
  --radius-lg: 1rem;      /* 16px */
  --radius-full: 9999px;

  --border-light: 1px solid var(--color-beige-100);

  /* -------------------------------------------------------------------------
     Shadows (centered / bottom-biased only)
     ------------------------------------------------------------------------- */
  --shadow-sm: 0 1px 3px rgba(45, 45, 45, 0.06);
  --shadow-md: 0 4px 12px rgba(45, 45, 45, 0.08);
  --shadow-lg: 0 8px 30px rgba(45, 45, 45, 0.12);

  /* -------------------------------------------------------------------------
     Transitions
     ------------------------------------------------------------------------- */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
  --transition-slow: 400ms ease;
}

/* -------------------------------------------------------------------------
   Breakpoint Overrides
   ------------------------------------------------------------------------- */
@media (min-width: 768px) {
  :root {
    --container-padding: var(--space-8);
  }
}

@media (min-width: 1024px) {
  :root {
    --container-padding: var(--space-10);
  }
}