/* ============================================================
   Rainbow International School — Color tokens
   Base hues sampled directly from the brand mark (logo figures):
   blue  #5083BB · orange #CC7028
   ============================================================ */

:root {
  /* ---------- Brand: Blue (the "reaching" figure, boy) ---------- */
  --blue-900: #1F3A54;
  --blue-800: #274A6B;
  --blue-700: #35618C;
  --blue-600: #5083BB; /* brand base — sampled from logo */
  --blue-500: #6B97C8;
  --blue-400: #8CAED4;
  --blue-300: #ACC5E1;
  --blue-200: #CBDCED;
  --blue-100: #E4EDF6;
  --blue-50:  #F3F7FB;

  /* ---------- Brand: Orange (the "reaching" figure, girl) ---------- */
  --orange-900: #5C3110;
  --orange-800: #7A3F14;
  --orange-700: #A2551C;
  --orange-600: #CC7028; /* brand base — sampled from logo */
  --orange-500: #D6864B;
  --orange-400: #DF9C6C;
  --orange-300: #E9B893;
  --orange-200: #F2D3BB;
  --orange-100: #FBEBE0;
  --orange-50:  #FDF5EF;

  /* ---------- Neutrals (warm-tinted, not cold gray) ---------- */
  --neutral-900: #2B2621;
  --neutral-800: #3E3A34;
  --neutral-700: #55504A;
  --neutral-600: #6F6A62;
  --neutral-500: #8A8478;
  --neutral-400: #ACA69B;
  --neutral-300: #CBC5B9;
  --neutral-200: #E1DCD2;
  --neutral-100: #F1EEE8;
  --neutral-50:  #FAF9F6;
  --white: #FFFFFF;

  /* ---------- Rainbow accents ----------
     Used sparingly: grade-level tags, subject badges, chart series,
     illustration accents. Never as large background fields. */
  --rainbow-red:    #D0574B;
  --rainbow-yellow: #E8B23D;
  --rainbow-green:  #4F9A6E;
  --rainbow-teal:   #3E93A0;
  --rainbow-purple: #8267A8;
  --rainbow-pink:   #C9668C;

  /* ---------- Semantic status ---------- */
  --success:      #3E8F5C;
  --success-bg:   #E9F5EE;
  --warning:      #C98A1F;
  --warning-bg:   #FBF1DD;
  --error:        #C6483A;
  --error-bg:     #FBEAE8;
  --info:         var(--blue-600);
  --info-bg:      var(--blue-50);

  /* ---------- Semantic aliases (use these in UI) ---------- */
  --brand-primary:        var(--blue-600);
  --brand-primary-hover:  var(--blue-700);
  --brand-primary-active: var(--blue-800);
  --brand-secondary:        var(--orange-600);
  --brand-secondary-hover:  var(--orange-700);
  --brand-secondary-active: var(--orange-800);

  --text-heading:  var(--neutral-900);
  --text-body:     var(--neutral-800);
  --text-muted:    var(--neutral-600);
  --text-faint:    var(--neutral-500);
  --text-on-brand: var(--white);
  --text-link:     var(--blue-700);

  --surface-page:    var(--white);
  --surface-sunken:  var(--neutral-50);
  --surface-card:    var(--white);
  --surface-muted:   var(--neutral-100);
  --surface-inverse: var(--neutral-900);

  --border-default: var(--neutral-200);
  --border-strong:  var(--neutral-300);
  --border-focus:   var(--blue-600);
}