/* ============================================================
   GROUNDWORK CX — COLOR TOKENS
   Anchored in Deep Navy (authority, structure) with Gold
   (insight, value) as accent. Off-white grounds everything.
   Usage targets: Navy 60–70% · Gold 10–20% · Neutrals 20–30%.
   ============================================================ */
:root {
  /* ---- Core palette (exact brand values) ---- */
  --navy:        #0B1F3A; /* Primary — backgrounds, large type, key elements */
  --gold:        #D4A64A; /* Accent — insight, value, what matters most */
  --off-white:   #F7F7F5; /* Primary background */
  --charcoal:    #1A1F26; /* Strong text */
  --slate:       #6B7280; /* Secondary text */
  --light-gray:  #E5E7EB; /* Borders / dividers */
  --pale-gray:   #F1F2F4; /* Surfaces */
  --white:       #FFFFFF; /* Clean / inverse */

  /* ---- Navy ramp (derived for states & depth) ---- */
  --navy-950:    #060F1F;
  --navy-900:    #081628;
  --navy-800:    #0B1F3A; /* = --navy */
  --navy-700:    #143052;
  --navy-600:    #1E436E;
  --navy-500:    #2C5A8C;
  --navy-100:    #DCE3EC;
  --navy-050:    #EDF1F6;

  /* ---- Gold ramp (derived for states & emphasis) ---- */
  --gold-700:    #A87C2E;
  --gold-600:    #BE8F3A; /* hover / pressed gold */
  --gold-500:    #D4A64A; /* = --gold */
  --gold-400:    #E0BA6E;
  --gold-200:    #EFD7A4;
  --gold-100:    #F6E9CC;
  --gold-050:    #FBF4E4; /* faint gold wash for highlight surfaces */

  /* ---- Neutral ramp ---- */
  --gray-900:    #1A1F26; /* = --charcoal */
  --gray-700:    #3F4753;
  --gray-500:    #6B7280; /* = --slate */
  --gray-300:    #C9CED6;
  --gray-200:    #E5E7EB; /* = --light-gray */
  --gray-100:    #F1F2F4; /* = --pale-gray */
  --gray-050:    #F7F7F5; /* = --off-white */

  /* ---- Semantic status (support color with icons/labels per brand) ---- */
  --success:     #2E7D5B;
  --success-bg:  #E5F2EC;
  --warning:     #C08A2E;
  --warning-bg:  #FBF1DC;
  --danger:      #C0392B;
  --danger-bg:   #F8E6E3;
  --info:        #1E436E;
  --info-bg:     #E7EEF6;

  /* ============================================================
     SEMANTIC ALIASES — reference these in product UI
     ============================================================ */
  /* Text */
  --text-strong:    var(--charcoal); /* headlines, high-emphasis */
  --text-body:      #233244;         /* default body on light */
  --text-secondary: var(--slate);    /* captions, supporting */
  --text-muted:     #8A93A0;
  --text-inverse:   var(--white);    /* on navy / dark */
  --text-on-gold:   var(--navy);     /* NEVER white on gold */
  --text-accent:    #727272; /* WCAG AA-safe neutral for eyebrow labels on light bg */
  --text-link:      var(--navy-700);

  /* Surfaces */
  --surface-page:    var(--off-white);
  --surface-card:    var(--white);
  --surface-raised:  var(--pale-gray);
  --surface-sunken:  var(--off-white);
  --surface-inverse: var(--navy);
  --surface-inverse-2: var(--navy-900);
  --surface-accent:  var(--gold);
  --surface-accent-soft: var(--gold-050);

  /* Borders & dividers */
  --border:         var(--light-gray);
  --border-strong:  #CBD2DB;
  --border-inverse: rgba(255,255,255,0.16);
  --divider:        var(--light-gray);
  --ring-focus:     rgba(212,166,74,0.55); /* gold focus ring */

  /* Interactive */
  --accent:           var(--gold);
  --accent-hover:     var(--gold-600);
  --accent-pressed:   var(--gold-700);
  --action:           var(--navy);
  --action-hover:     var(--navy-700);
  --action-pressed:   var(--navy-900);
}