/* ============================================================
   Midway Vacations — Color System
   Navy + Gold on white. Playful but professional; coastal Hawai‘i.
   ============================================================ */

:root {
  /* ---- Brand primaries (from brand guide) ---- */
  --mv-ocean-navy:   #032A45; /* Primary. Backgrounds, ink, brand.        */
  --mv-golden-sand:  #E4C874; /* Primary accent. The signature gold.      */

  /* ---- Brand secondaries (accent / variation) ---- */
  --mv-misty-blue:   #00415B; /* Deep teal-navy. Raised navy surfaces.    */
  --mv-bright-sand:  #F2D991; /* Lighter gold. Highlights, tints.         */
  --mv-turquoise:    #469489; /* Coastal green. Success, eco, accents.    */
  --mv-terracotta:   #CD8564; /* Warm sunset. Warnings, warm accents.     */

  /* ---- Navy / ink ramp (cool, derived from Ocean Navy) ---- */
  --mv-navy-950: #021B2E;
  --mv-navy-900: #032A45;  /* = Ocean Navy */
  --mv-navy-800: #003049;
  --mv-navy-700: #00415B;  /* = Misty Blue */
  --mv-navy-600: #1C5670;
  --mv-navy-500: #3E6E86;
  --mv-navy-400: #6B91A4;
  --mv-navy-300: #9DB6C4;
  --mv-navy-200: #C7D6DF;
  --mv-navy-100: #E5EDF2;
  --mv-navy-50:  #F3F7F9;

  /* ---- Gold / sand ramp ---- */
  --mv-gold-700: #A8842F;  /* Deepened gold — passes contrast on white   */
  --mv-gold-600: #C7A24A;
  --mv-gold-500: #E4C874;  /* = Golden Sand */
  --mv-gold-400: #ECD78F;
  --mv-gold-300: #F2D991;  /* = Bright Sand */
  --mv-gold-200: #F8E9BE;
  --mv-gold-100: #FCF4DC;
  --mv-gold-50:  #FEFAF0;

  /* ---- Neutrals (warm-cool whites for paper & surfaces) ---- */
  --mv-white:  #FFFFFF;
  --mv-paper:  #FBFCFD;
  --mv-mist:   #F4F7F9;
  --mv-cloud:  #EAF0F4;
  --mv-line:   #DCE5EB;
  --mv-line-strong: #C2D0D9;
  --mv-slate:  #5C7280;  /* Muted body / captions on light */
  --mv-ink:    #1B2B36;

  /* ---- Coastal accent tints (for soft fills) ---- */
  --mv-turquoise-tint: #E5F0EE;
  --mv-terracotta-tint:#F8EAE2;

  /* =========================================================
     SEMANTIC ALIASES — reference these in UI, not raw values.
     ========================================================= */

  /* Surfaces */
  --surface-page:    var(--mv-white);
  --surface-subtle:  var(--mv-mist);
  --surface-card:    var(--mv-white);
  --surface-sunken:  var(--mv-navy-50);
  --surface-navy:    var(--mv-ocean-navy);
  --surface-navy-raised: var(--mv-misty-blue);
  --surface-gold:    var(--mv-golden-sand);
  --surface-gold-soft: var(--mv-gold-100);

  /* Text */
  --text-primary:    var(--mv-ocean-navy);
  --text-secondary:  var(--mv-navy-600);
  --text-muted:      var(--mv-slate);
  --text-inverse:    var(--mv-white);
  --text-on-navy:    var(--mv-navy-100);
  --text-on-navy-muted: var(--mv-navy-300);
  --text-gold:       var(--mv-gold-700);   /* gold text on light = deepened */
  --text-gold-on-navy: var(--mv-golden-sand);

  /* Borders */
  --border-subtle:   var(--mv-line);
  --border-default:  var(--mv-line-strong);
  --border-strong:   var(--mv-navy-300);
  --border-on-navy:  rgba(255, 255, 255, 0.16);
  --border-gold:     var(--mv-golden-sand);

  /* Interactive — gold primary */
  --accent:          var(--mv-golden-sand);
  --accent-hover:    var(--mv-gold-600);
  --accent-press:    var(--mv-gold-700);
  --on-accent:       var(--mv-ocean-navy);  /* navy text on gold buttons */

  /* Interactive — navy */
  --brand:           var(--mv-ocean-navy);
  --brand-hover:     var(--mv-misty-blue);
  --brand-press:     var(--mv-navy-950);

  /* Focus ring */
  --focus-ring:      var(--mv-turquoise);

  /* Status */
  --status-success:      var(--mv-turquoise);
  --status-success-tint: var(--mv-turquoise-tint);
  --status-warning:      var(--mv-terracotta);
  --status-warning-tint: var(--mv-terracotta-tint);
  --status-info:         var(--mv-misty-blue);
  --status-info-tint:    var(--mv-navy-50);
  --status-error:        #C0492F;
  --status-error-tint:   #F8E7E1;
}