/* ==========================================================================
   mba-site.css
   Shared stylesheet for the MBA 2026-2027 cohort site.
   Linked by every page. Defines the palette, type scale, and the shared
   button / stamp styling. Palette is drawn from Cal Poly Humboldt's own
   brand deck, muted so it reads as a hint, not school spirit.

   The three class-color slots (--class-1/2/3) are defined here in ONE place.
   Which course gets which color is assigned later, on the calendar and class
   pages, not here.
   ========================================================================== */

:root {
  /* --- Warm ground (Humboldt "Sand" + "Old Growth Green") --- */
  --ground:        #F5F3E7;  /* Sand - page background, warm off-white */
  --ground-panel:  #FBFAF3;  /* a shade lighter, for cards / raised panels */
  --ground-sunk:   #ECE9D8;  /* a shade darker, for wells / folded rows   */

  --ink:           #003D38;  /* deep Old Growth Green - body text (not black) */
  --ink-soft:      #4A5D58;  /* muted green-grey - secondary text */
  --ink-faint:     #8A968F;  /* faint - stamps, timestamps, metadata */

  --line:          #DAD6C4;  /* hairline borders / dividers on the sand */

  /* --- Accent (interactive things feel grounded in the deep green) --- */
  --accent:        #004C46;  /* Old Growth Green - buttons, active state */
  --accent-hover:  #00655C;  /* lifted on hover */
  --accent-ink:    #F5F3E7;  /* text sitting on the accent */

  /* --- Three class-color slots (muted Humboldt hues) ---
     Swap these three values to recolor a class everywhere at once. */
  --class-1:       #00856A;  /* Sea Glass green */
  --class-2:       #5B8AA6;  /* Pacific Blue, deepened so it reads as its own */
  --class-3:       #E39A12;  /* Sunset Gold, pulled down from #F2A900 */

  /* soft tints of each class color, for row backgrounds on the sand */
  --class-1-tint:  #E0EFEA;
  --class-2-tint:  #E4ECF1;
  --class-3-tint:  #F7EDD6;

  /* --- Type: three weights of Arial --- */
  --face: Arial, Helvetica, "Liberation Sans", sans-serif;
  --w-reg: 400;   /* reading */
  --w-mid: 700;   /* headings */
  --w-min: 400;   /* stamps / small print, carried by size + color, not weight */

  /* --- Type scale --- */
  --t-hero:  2.25rem;  /* the titled front-door header */
  --t-h1:    1.6rem;
  --t-h2:    1.25rem;
  --t-body:  1rem;
  --t-small: 0.85rem;
  --t-stamp: 0.78rem;

  /* --- Spacing --- */
  --gap-xs: 0.35rem;
  --gap-sm: 0.6rem;
  --gap:    1rem;
  --gap-lg: 1.75rem;
  --gap-xl: 3rem;

  --radius:    10px;   /* buttons, fields */
  --radius-lg: 16px;   /* panels, posts */
  --radius-pill: 999px;

  /* Soft shadows - depth by light, not by hard borders (the DOS tell) */
  --shadow-sm: 0 1px 2px rgba(0, 61, 56, 0.05), 0 1px 3px rgba(0, 61, 56, 0.06);
  --shadow-md: 0 2px 6px rgba(0, 61, 56, 0.06), 0 4px 12px rgba(0, 61, 56, 0.07);
  --shadow-lift: 0 4px 10px rgba(0, 61, 56, 0.10), 0 8px 24px rgba(0, 61, 56, 0.08);

  --measure: 42rem;  /* comfortable reading column width */
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--face);
  font-weight: var(--w-reg);
  font-size: var(--t-body);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3 {
  font-weight: var(--w-mid);
  line-height: 1.2;
  margin: 0 0 var(--gap-sm);
}

h1 { font-size: var(--t-h1); }
h2 { font-size: var(--t-h2); }

p { margin: 0 0 var(--gap); }

a {
  color: var(--accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
a:hover { color: var(--accent-hover); }

/* --------------------------------------------------------------------------
   Shared button
   -------------------------------------------------------------------------- */

.btn {
  font-family: var(--face);
  font-weight: var(--w-mid);
  font-size: var(--t-body);
  color: var(--accent-ink);
  background: var(--accent);
  border: none;
  border-radius: var(--radius-pill);
  padding: 0.7rem 1.6rem;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: background 0.18s ease, box-shadow 0.18s ease, transform 0.06s ease;
}
.btn:hover  { background: var(--accent-hover); box-shadow: var(--shadow-md); }
.btn:active { transform: translateY(1px); box-shadow: var(--shadow-sm); }

.btn-quiet {
  color: var(--accent);
  background: var(--ground-panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  padding: 0.7rem 1.4rem;
  box-shadow: var(--shadow-sm);
  transition: background 0.18s ease, box-shadow 0.18s ease, color 0.18s ease, transform 0.06s ease;
}
.btn-quiet:hover {
  background: var(--ground-panel);
  color: var(--accent-hover);
  box-shadow: var(--shadow-md);
}
.btn-quiet:active { transform: translateY(1px); box-shadow: var(--shadow-sm); }

/* --------------------------------------------------------------------------
   Shared stamp  ->  "Name, June 5, 8:05 am"
   The metadata line under every post, reply, calendar edit, and class-page
   block. Carried by size and color, not weight, so it recedes.
   -------------------------------------------------------------------------- */

.stamp {
  font-family: var(--face);
  font-weight: var(--w-min);
  font-size: var(--t-stamp);
  color: var(--ink-faint);
  letter-spacing: 0.01em;
}
.stamp .stamp-name { color: var(--ink-soft); }

/* --------------------------------------------------------------------------
   Quality floor
   -------------------------------------------------------------------------- */

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}