/* =========================================================
   NESH STORIES — Centralized Brand Color Palette System
   UI/UX & Brand Design Guidelines
   ========================================================= */

:root {
  /* Core 5-Color System */
  --primary: #9E616C;         /* Dusk Rose Gold (CTAs, primary brand accents, active states) */
  --primary-hover: #864F59;   /* Deep Dusk Rose (Hover state, focus) */
  --accent: #D49B8E;          /* Warm Champagne Rose (Micro-interactions, badge tints, glows) */
  --bg-main: #FAF7F5;         /* Warm Alabaster (Primary page canvas & body background) */
  --bg-surface: #FFFFFF;      /* Clean White (Card surfaces, modals, popovers) */
  --text-dark: #211E1D;       /* Espresso Charcoal (Headings, primary body typography) */
  --text-muted: #5A5450;      /* Muted Charcoal / Warm Gray (Subtitles, descriptions, captions) */
  --supporting: #EADFD9;      /* Soft Cashmere Stone (Borders, divider lines, filter chips) */
  --border-subtle: #E2D7D1;   /* Subtle divider border */
  --footer-bg: #1C1918;       /* Deep Espresso Black (Grounded footer background) */

  /* Shadows with warm brand undertone */
  --shadow-sm: 0 2px 8px rgba(33, 30, 29, 0.04);
  --shadow-md: 0 8px 24px rgba(33, 30, 29, 0.08);
  --shadow-lg: 0 16px 36px rgba(158, 97, 108, 0.12);
  --shadow-btn: 0 8px 24px rgba(158, 97, 108, 0.35);
}

/* Global utility classes for quick color application */
.bg-theme-main { background-color: var(--bg-main) !important; }
.bg-theme-surface { background-color: var(--bg-surface) !important; }
.bg-theme-primary { background-color: var(--primary) !important; color: #fff !important; }
.bg-theme-supporting { background-color: var(--supporting) !important; }

.text-theme-primary { color: var(--primary) !important; }
.text-theme-dark { color: var(--text-dark) !important; }
.text-theme-muted { color: var(--text-muted) !important; }
.border-theme-subtle { border-color: var(--border-subtle) !important; }