/* ===========================================================================
   Level Up Learning — Color tokens
   High-contrast, confident palette: ink black + mint accent + warm neutrals.
   Mint (#BFDDDB) is a HIGHLIGHT / surface color — never use it for body text
   on white (insufficient contrast). For accessible accent text use --evergreen.
   =========================================================================== */
:root {
  /* --- Brand core --- */
  --black:        #000000;   /* logo / pure brand black */
  --ink:          #0A0B0B;   /* primary text + bold surfaces */
  --mint:         #BFDDDB;   /* PRIMARY brand accent (logo bars) */
  --white:        #FFFFFF;

  /* --- Mint scale (cool sage-teal, hue ~177) --- */
  --mint-50:      #F2F8F7;
  --mint-100:     #E2EFEE;
  --mint-200:     #CFE5E3;
  --mint-300:     #BFDDDB;   /* = --mint */
  --mint-400:     #99C7C3;
  --mint-500:     #6FA9A4;
  --mint-600:     #4E8782;
  --mint-700:     #3A6863;
  --mint-800:     #2A4E4A;
  --evergreen:    #1E423F;   /* accessible deep accent for text/icons on light */

  /* --- Neutral scale (very slightly warm grey) --- */
  --neutral-0:    #FFFFFF;
  --neutral-50:   #F7F7F6;
  --neutral-100:  #F0EFED;
  --neutral-200:  #E4E3E0;
  --neutral-300:  #D2D1CD;
  --neutral-400:  #ADACA7;
  --neutral-500:  #84837E;
  --neutral-600:  #5E5D59;
  --neutral-700:  #403F3C;
  --neutral-800:  #262624;
  --neutral-900:  #131312;

  /* --- Semantic: surfaces --- */
  --surface-page:     var(--white);
  --surface-subtle:   var(--neutral-50);
  --surface-card:     var(--white);
  --surface-inverse:  var(--ink);      /* dark sections / footer */
  --surface-accent:   var(--mint-100); /* tinted highlight blocks */

  /* --- Semantic: text --- */
  --text-strong:   var(--ink);
  --text-body:     var(--neutral-700);
  --text-muted:    var(--neutral-500);
  --text-inverse:  var(--white);
  --text-on-mint:  var(--ink);         /* mint is light → ink text */
  --text-accent:   var(--evergreen);

  /* --- Semantic: borders / lines --- */
  --border-subtle: var(--neutral-200);
  --border-strong: var(--neutral-300);
  --border-ink:    var(--ink);

  /* --- Status (used sparingly; brand stays mostly mono+mint) --- */
  --success:  #2E7D5B;
  --warning:  #C77D27;
  --danger:   #C0463C;
  --info:     var(--mint-600);

  /* --- Focus --- */
  --focus-ring: var(--mint-600);
}