/* Mizan Institute — Color tokens */
:root {
  /* ---- Brand base palette ---- */
  --navy:        #0F3E5A;  /* Primary */
  --navy-700:    #0C3247;  /* Darker navy — hover on navy surfaces */
  --navy-900:    #082435;  /* Deepest navy — footers, overlays */
  --navy-300:    #3E6680;  /* Lighter navy — secondary text on cream */

  --gold:        #C8943A;  /* Accent */
  --gold-600:    #B07F2C;  /* Gold hover / pressed */
  --gold-100:    #F3E6CC;  /* Gold tint — subtle highlight fills */

  --cream:       #F5F3EE;  /* Background */
  --light-blue:  #EAF1F6;  /* Callout boxes, sidebars */
  --blue-grey:   #9BAAB5;  /* Muted text, dividers, placeholders */

  --error:       #C0392B;  /* Error / alert */
  --error-100:   #F7E4E1;  /* Error tint background */

  --white:       #FFFFFF;
  --ink:         #1A2A33;  /* Near-black for body copy on light */

  /* ---- Semantic aliases ---- */
  --surface-page:    var(--cream);
  --surface-card:    var(--white);
  --surface-callout: var(--light-blue);
  --surface-inverse: var(--navy);

  --text-strong:   var(--navy);
  --text-body:     var(--ink);
  --text-muted:    var(--blue-grey);
  --text-on-dark:  var(--white);
  --text-on-dark-muted: #B9C7D1;
  --text-accent:   var(--gold);

  --border-subtle: #E3DFD6;   /* hairline on cream/white */
  --border-muted:  #D5DEE5;   /* hairline on light-blue */
  --border-strong: var(--navy);

  --link:          var(--navy);
  --link-hover:    var(--gold-600);

  --focus-ring:    var(--gold);
}