/* ==========================================================================
   DESIGN TOKENS
   Change the brand's major colors and sizes here. Loaded before site.css (public
   site, layout.pug) and styles.css (Dash, layout-lms.pug).

   This file only defines variables — no selectors that style anything — so it is
   safe to load anywhere. Bootstrap is pointed at these tokens in site.css.

   Breakpoints can't be CSS variables (media queries don't support var()); for
   reference, the stylesheets use Bootstrap's: sm 576px · md 768px · lg 992px · xl 1200px.
   ========================================================================== */

:root {
  /* ---- Brand ------------------------------------------------------------ */
  --color-brand:        #c8202f;   /* buttons, links, accents, active nav */
  --color-brand-rgb:    200, 32, 47; /* same color as r, g, b (for focus rings / rgba) */
  --color-brand-dark:   #a31926;   /* hover / pressed */
  --color-brand-dark-rgb: 163, 25, 38;
  --color-brand-tint:   #fdf3f3;   /* faint brand wash, e.g. open FAQ question */

  /* ---- Accents (donate page infographics) ---------------------------------- */
  --color-accent-amber:       #f2b56b;
  --color-accent-amber-tint:  #fbe8d0;
  --color-accent-plum:        #7b2d65;
  --color-accent-plum-tint:   #ead9e7;
  --color-accent-coral:       #e8655f;
  --color-accent-coral-tint:  #f8d2cf;

  /* ---- Text --------------------------------------------------------------- */
  --color-text:         #1c1c1c;   /* body copy, nav links */
  --color-text-muted:   #555;      /* blockquotes, secondary copy */
  --color-text-subtle:  #777;      /* small uppercase labels */
  --color-white:        #fff;
  --color-black:        #000;

  /* ---- Surfaces & borders -------------------------------------------------- */
  --color-surface:        #fff;     /* cards */
  --color-surface-muted:  #f7f5f2;  /* alternating "muted" sections */
  --color-border:         #ece8e3;  /* card outlines */
  --color-border-strong:  #e3ded8;  /* table cells */

  /* ---- Header bars ---------------------------------------------------------- */
  --color-topbar-bg:      #111;     /* thin utility bar at the very top */
  --color-topbar-text:    #ddd;
  --color-programs-bg:    #d73236 ; /*#d73236;     /* black programs bar under the main nav */
  --color-programs-text:  #f0f0f0;
  --color-programs-label: #232323;  /* muted level labels (Undergraduate, Master's, Doctorate) */

  /* ---- Typography ------------------------------------------------------------ */
  --font-body:     'Inter', system-ui, -apple-system, sans-serif;
  --font-heading:  'Merriweather', Georgia, serif;
  --font-size-topbar:    .85rem;
  --font-size-programs:  .9rem;
  --font-size-eyebrow:   .78rem;
  --font-size-label:     .75rem;   /* footer column headings */
  --font-size-prose:     1.08rem;  /* blog posts / long-form text */
  --line-height-prose:   1.75;
  --step-number-size:    2rem;     /* the big red 1 2 3 4 */

  /* ---- Layout & spacing ------------------------------------------------------ */
  --section-padding-y:         3.5rem;   /* vertical padding of each page section */
  --section-padding-y-mobile:  2.25rem;
  --hero-padding-top:          4rem;     /* page title block */
  --hero-padding-bottom:       1.5rem;
  --hero-padding-top-mobile:   2rem;
  --hero-padding-bottom-mobile: .75rem;
  --measure:                   46rem;    /* max line length for leads and prose */

  /* ---- Shape ------------------------------------------------------------------ */
  --radius-sm:  .5rem;
  --radius-lg:  .75rem;   /* cards, photos */
  --border-accent-width: 3px; /* testimonial / blockquote rules, programs-bar underline */

  /* ---- Component sizes -------------------------------------------------------- */
  --logo-height:          34px;    /* header logo, tablet & desktop */
  --logo-height-mobile:   28px;    /* header logo, phones */
  --logo-height-footer:   34px;    /* footer logo (matches the header) */
  --footer-info-gap:      4rem;    /* space between the footer's left-hand info and its link columns (desktop) */
  --icon-sm:              56px;    /* card icons (SVG illustrations) */
  --icon-sm-raster:       36px;    /* small flat raster icons, shown near natural size */
  --icon-md:              96px;
  --icon-lg:              210px;
  --icon-cta:             48px;    /* Talk / Ask / Enroll icons */
  --avatar-size:          120px;
  --avatar-sq-sm:         160px;   /* smaller square photos, e.g. PhD candidates */
  --faculty-photo-size:   80px;    /* round headshots in faculty grids */
  --band-image-max-height: 420px;
  --illustration-max-height: 260px;
  --logo-strip-height:    50px;    /* company logos */
  --post-card-image-ratio: 16 / 9; /* blog index card images */

  /* ---- Dash (layout-lms / styles.css) ------------------------------------------ */
  /* The student/faculty Dash still uses its original, lighter red palette. Point
     these at the brand tokens above to unify the two. */
  --dash-brand:         #ea5050;
  --dash-brand-rgb:     234, 80, 80;
  --dash-brand-dark:    #e63023;
  --dash-brand-darker:  #DA291C;
  --dash-brand-light:   #ff5d5d;   /* logo color: active pills, progress bars */
  --dash-muted-bg:      #F6F6F6;
}