/* =====================================================================
   MyInviteRSVP — BRAND DESIGN SYSTEM (single source of truth)
   Matches the MyInviteRSVP logo: Navy #062042 + Coral #FE5C34.
   Every page (landing, studio, host portal, RSVP) reads these tokens.
   Change a color here and it changes everywhere.

   Usage rules
   - Coral (#FE5C34, the logo coral): primary buttons, active markers,
     icons, thin accent rules. Text ON coral is Navy (5.3:1) — never white
     (3.1:1, too faint).
   - Coral Text (#C73D18): coral used AS text — links, eyebrows, small
     highlights. The logo coral itself is too light for text (2.8:1).
   - Navy (#062042, the logo navy): headings, main text, logo, selected
     chips/tabs, dark sections and footer.
   - Warm Ivory: page background. White: cards, forms, modals.
   - Navy Mist / Coral Mist: soft backgrounds for selected rows, featured
     bands and notices. Use sparingly.
   - Customer invitation colors are NOT brand colors: each event keeps its
     own accent (events.theme_color), used only on that guest RSVP page.
   ===================================================================== */
:root {
  /* Logo colors (exact) */
  --brand-navy: #062042;
  --brand-coral: #FE5C34;

  /* Brand palette */
  --brand-primary: #FE5C34;        /* buttons, markers (logo coral) */
  --brand-primary-hover: #FF7A57;  /* lighter on hover keeps navy text crisp */
  --brand-on-primary: #062042;     /* text/icons placed on coral */
  --brand-primary-text: #B3360F;   /* coral as readable text (5.5:1 on ivory, 5.1:1 on soft blue) */
  --brand-primary-text-hover: #932C0C;
  --brand-primary-tint: #FFF1EC;   /* Coral Mist: hover rows, notices */
  --brand-soft: #E6EBF2;           /* Navy Mist: selected nav, featured band */
  --brand-accent-line: #FE5C34;    /* thin decorative rules */
  --brand-ivory: #F7F4EE;          /* page background */
  --brand-white: #FFFFFF;          /* cards, forms, modals */
  --brand-slate: #687386;          /* secondary text on white */
  --brand-slate-ink: #5C6679;      /* secondary text on ivory (5.3:1) */
  --brand-text: #2C3A55;           /* body copy */
  --brand-border: #E5E8EF;
  --brand-border-strong: #CBD2DF;
  --brand-ivory-deep: #EFEBE2;

  /* Status (muted) */
  --brand-ok: #256B4D;   --brand-ok-bg: #E6F2EC;
  --brand-warn: #96600F; --brand-warn-bg: #F8EEDC;
  --brand-bad: #B4373F;  --brand-bad-bg: #F8E6E7;
  --brand-info: #2C4A78; --brand-info-bg: #E6EBF2;

  /* Type */
  --brand-font-display: 'Plus Jakarta Sans', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --brand-font-body: 'Figtree', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --brand-font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Shape & depth (quiet) */
  --brand-radius-sm: 8px;
  --brand-radius: 12px;
  --brand-radius-lg: 16px;
  --brand-radius-pill: 999px;
  --brand-shadow-sm: 0 1px 2px rgba(6, 32, 66, .06);
  --brand-shadow-md: 0 1px 2px rgba(6, 32, 66, .05), 0 6px 18px rgba(6, 32, 66, .07);
  --brand-shadow-lg: 0 18px 48px rgba(6, 32, 66, .2);
  --brand-focus: 0 0 0 3px rgba(254, 92, 52, .35);
}