/* =====================================================================
   Meravyaah design tokens (UI v2) - LIGHT PALETTE
   Client decision: wine-500 #A3343A is the accent; no darker wine (600..900, incl. #800000) and no
   dark neutrals (stone-500..charcoal-900). The only dark colour kept is
   charcoal #2A2421, and ONLY for text, so pages stay readable.
   Rule: components use ONLY these variables. No raw hex anywhere else.
   Exception (documented): --mv-brand-whatsapp, WhatsApp's own colour.
   ===================================================================== */
:root {
  /* ---- wine (light steps only) ---- */
  --mv-wine-50:  #FBF2F1;
  --mv-wine-100: #F5E0DE;
  --mv-wine-200: #EAC0BE;
  --mv-wine-300: #DA9694;
  --mv-wine-400: #C2625F;
  --mv-wine-500: #A3343A;   /* primary accent (client choice); white text on it = 6.8:1 */

  /* ---- neutrals (light steps only) ---- */
  --mv-ivory-0:  #FFFFFF;
  --mv-ivory-50: #FBF8F3;
  --mv-sand-100: #F4EDE3;
  --mv-sand-200: #E9DFD1;
  --mv-sand-300: #D8CAB8;

  /* ---- gold ---- */
  --mv-gold-500: #C9A25E;
  --mv-gold-300: #E6C98F;
  --mv-premium-bg: #FFF4DE;
  --mv-premium-text: #7A5410;
  --mv-tier-bronze-bg: #F7EADF;   --mv-tier-bronze: #8A4F24;   /* plan tiers (text ~6.9:1 on bg) */
  --mv-tier-silver-bg: #EEF0F3;   --mv-tier-silver: #4D5866;   /* ~6.6:1 */

  /* ---- text (the one dark colour, text only) ---- */
  --mv-ink: #2A2421;
  --mv-text: var(--mv-ink);
  --mv-text-2: rgba(42,36,33,.78);   /* secondary text  (~7:1 on ivory) */
  --mv-text-3: rgba(42,36,33,.70);   /* tertiary text   (~5.6:1 on ivory) */
  --mv-icon: rgba(42,36,33,.62);

  /* ---- status (text / tint) ---- */
  --mv-success: #2F7A4F;  --mv-success-bg: #E7F3EC;
  --mv-warning: #8A5A00;  --mv-warning-bg: #FFF3DC;
  --mv-error:   #B42318;  --mv-error-bg:   #FDECEA;
  --mv-info:    #2B5C8A;  --mv-info-bg:    #E8F0F8;

  /* ---- gradients (light) ---- */
  --mv-grad-ai: linear-gradient(135deg, #A3343A 0%, #C9A25E 100%);
  --mv-grad-ai-soft: linear-gradient(135deg, #FBEDEA 0%, #F8E4EC 50%, #FAEEDD 100%);
  --mv-grad-hero: radial-gradient(900px 520px at 88% 0%, #F6DDE3 0%, rgba(246,221,227,0) 62%),
                  radial-gradient(760px 480px at 0% 100%, #FAE8D6 0%, rgba(250,232,214,0) 62%),
                  #FBF8F3;
  --mv-grad-soft: linear-gradient(135deg, #FBF2F1 0%, #F5E0DE 100%);

  /* ---- semantic ---- */
  --mv-bg: var(--mv-ivory-50);
  --mv-surface: var(--mv-ivory-0);
  --mv-sunken: var(--mv-sand-100);
  --mv-border: var(--mv-sand-200);
  --mv-border-strong: var(--mv-sand-300);
  --mv-primary: var(--mv-wine-500);          /* buttons, accents (white text passes AA at any size) */
  --mv-on-primary: var(--mv-ivory-0);
  --mv-accent-line: var(--mv-wine-500);      /* underlines, active states, borders */
  --mv-focus: var(--mv-wine-500);
  --mv-slate-700: #34495E;                     /* client choice: rgb(52 73 94), footer only */
  --mv-footer-bg: var(--mv-slate-700);
  --mv-footer-line: rgba(255,255,255,.14);
  --mv-footer-text: rgba(255,255,255,.94);     /* ~8.9:1 on slate */
  --mv-footer-text-2: rgba(255,255,255,.76);   /* ~6:1 on slate */
  --mv-footer-accent: var(--mv-wine-200);      /* "vyaah", icons on slate (~5.6:1) */

  /* ---- elevation (ink at low opacity) ---- */
  --mv-shadow-sm: 0 1px 2px rgba(42,36,33,.06), 0 1px 3px rgba(42,36,33,.08);
  --mv-shadow-md: 0 4px 14px rgba(42,36,33,.08), 0 2px 4px rgba(42,36,33,.04);
  --mv-shadow-lg: 0 18px 44px rgba(42,36,33,.12), 0 4px 10px rgba(42,36,33,.05);
  --mv-shadow-primary: 0 8px 20px rgba(163,52,58,.26);
  --mv-ring: 0 0 0 3px rgba(163,52,58,.22);

  /* ---- shape, type, motion ---- */
  --mv-r-sm: 8px;  --mv-r-md: 12px;  --mv-r-lg: 16px;  --mv-r-xl: 24px;  --mv-r-pill: 999px;
  --mv-gutter: 16px;   /* page side padding; 28px tablet, 32px desktop (set in app.css) */
  --mv-section-y: 48px;        /* one vertical rhythm for every section: 48 / 64 / 80 */
  --mv-head-gap: 28px;         /* space under every section heading: 28 / 36 / 40 */
  --mv-grad-accent: linear-gradient(135deg, #A3343A 0%, #C9A25E 100%);   /* selected / featured borders */
  --mv-ring-select: 0 0 0 3px #FBF2F1, 0 0 0 5px rgba(163,52,58,.30);    /* focus: soft double ring */
  --mv-font-head: 'Cabin', 'Segoe UI', Arial, sans-serif;
  --mv-font-body: 'Figtree', 'Segoe UI', Arial, sans-serif;
  --mv-ease: cubic-bezier(.2,.8,.2,1);
  --mv-fast: 120ms;  --mv-base: 200ms;  --mv-slow: 320ms;

  /* ---- third-party brand (exception) ---- */
  --mv-brand-whatsapp: #25D366;
}