/* ==========================================================================
   MemberReel Shared Palette
   Central source of truth for ALL colors across the platform.
   Reference these variables — never hard-code hex values.
   ========================================================================== */

:root {
  /* --- BRAND ANCHORS (never change, core identity) --- */
  --mr-brand-navy: #1E2A3A;
  --mr-brand-navy-hover: #151f2e;
  --mr-brand-red: #C0392B;
  --mr-brand-red-hover: #a93226;

  /* --- SURFACES (warm, ascending from page to panel) --- */
  --mr-surface-page: #f5f0e8;         /* content area background (warm) */
  --mr-surface-hero: #fbf7f2;         /* hero / dashboard top (cream) */
  --mr-surface-hero-alt: #f5eee4;     /* hero gradient bottom stop */
  --mr-surface-panel: #ffffff;        /* raised cards, compose box, posts */
  --mr-surface-subtle: #fbf9f5;       /* textarea placeholders, input bg */

  /* --- BORDERS --- */
  --mr-border-warm: #e8ddc8;          /* on cream surfaces */
  --mr-border-cool: #c8d1db;          /* on white surfaces */
  --mr-border-divider: #eeeeee;       /* thin horizontal rules */
  --mr-border-strong: #b0bac5;        /* drawer outline, emphasized edges */

  /* --- TEXT --- */
  --mr-text-primary: #1E2A3A;         /* headings, body on light bg */
  --mr-text-secondary: #6b5d4a;       /* subtitles on warm bg */
  --mr-text-muted: #8a94a0;           /* labels, timestamps, hints */
  --mr-text-on-cream: #b8691a;        /* terracotta on warm — for accents */
  --mr-text-inverse: #ffffff;         /* text on navy or red */

  /* --- STATUS / SEMANTIC --- */
  --mr-status-live-bg: #e6f3ee;       /* green bubble background */
  --mr-status-live-border: #a8d5bd;
  --mr-status-live-text: #1b6b4e;     /* forest green */

  --mr-status-need-bg: #fdf2ef;       /* red-tinted pill background */
  --mr-status-need-border: #f5c4b5;
  --mr-status-need-text: #8b2d20;

  --mr-status-offer-bg: #e6f3ee;      /* shares live/offer palette */
  --mr-status-offer-border: #a8d5bd;
  --mr-status-offer-text: #1b6b4e;

  /* --- ACCENT (use sparingly — invitations, featured, response CTAs) --- */
  --mr-accent-terracotta: #b8691a;
  --mr-accent-terracotta-soft: #d48a3f;

  /* --- DEEP ACCENTS (avatars, logos, decorative) --- */
  --mr-accent-teal-deep: #2c5a6b;     /* avatar circles, member initials */
  --mr-accent-plum: #7a4a6a;          /* alt avatar, diversify from teal */

  /* --- RADIUS & SHADOWS --- */
  --mr-radius-sm: 4px;
  --mr-radius-md: 6px;
  --mr-radius-lg: 8px;
  --mr-radius-xl: 12px;

  --mr-shadow-card: 0 2px 12px rgba(30, 42, 58, 0.06);
  --mr-shadow-lifted: 0 6px 20px rgba(30, 42, 58, 0.10);

  /* --- FONTS (already in use — restated here for clarity) --- */
  --mr-font-serif: 'DM Serif Display', serif;
  --mr-font-body: 'Source Sans 3', sans-serif;
}

/* ==========================================================================
   USAGE GUIDE (comments for future edits — not applied styles)

   RED rule: use --mr-brand-red for ONE primary CTA per screen, plus the
   logo accent. Never more than 2 red elements on a page.

   SURFACE hierarchy: page (warm beige) → hero (cream) → panel (white).
   The warmer-to-cooler gradient signals "ambient area" vs "action area."

   TEXT on cream backgrounds must use --mr-text-secondary or
   --mr-text-on-cream — never --mr-text-muted (too light for warm bg).

   TEXT on white: primary / secondary / muted all work.

   TERRACOTTA is for invitation: "View profile →", "Be the first to
   respond →", "2 new responses". Not for destructive or urgent actions.
   ========================================================================== */