/* On Target ABA — brand tokens.
 * Single source of truth for portal color identity. Reference these vars
 * from inline page <style> blocks and from per-page tailwind.config so a
 * future palette tweak is one file. */

:root {
  /* Primary — replaces #4f46e5 indigo */
  --brand-primary:        #27AAE1;
  --brand-primary-hover:  #1E8FBE;
  --brand-primary-active: #176E94;
  --brand-primary-50:     #E6F5FC;
  --brand-primary-100:    #C2E6F7;
  --brand-primary-200:    #8CD2EF;
  --brand-primary-600:    #27AAE1;
  --brand-primary-700:    #1E8FBE;
  --brand-primary-800:    #176E94;
  --brand-primary-900:    #0A2E42;  /* sidebar bg — deep navy that flows from the brand-blue gradient */

  /* Semantic */
  --brand-red:    #ED1C24;
  --brand-green:  #009444;
  --brand-yellow: #FFDE17;

  /* Neutrals (unchanged — keep slate scale) */
  --brand-bg-dark:     #0f172a;
  --brand-card-dark:   #1e293b;
  --brand-border-dark: #334155;

  /* Warm cream — body bg for clinical/light pages. */
  --brand-cream:       #FAF7F2;
}

/* Four-colour brand stripe — references the logo palette (red, blue, green,
 * yellow). Drop a <div class="brand-stripe"></div> anywhere a thin playful
 * accent line is wanted (under headers, above footers, etc). */
.brand-stripe {
  height: 4px;
  width: 100%;
  background: linear-gradient(to right,
    #ED1C24 0%, #ED1C24 25%,
    #27AAE1 25%, #27AAE1 50%,
    #009444 50%, #009444 75%,
    #FFDE17 75%, #FFDE17 100%);
}

html { font-family: 'Nunito', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; }

@font-face {
  font-family: 'Great Vibes';
  src: url('/static/fonts/GreatVibes-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}