html { scroll-behavior: smooth; }

:root {
  /* Brand reds — constant across all pages */
  --red:     #CE1141;
  --red-m:   #A50D33;
  --red-l:   #FAE6EC;

  /* Course accent — each course page overrides these */
  --teal:    #0F6E56;
  --teal-l:  #E1F5EE;
  --teal-m:  #5DCAA5;

  /* Extended palette — shared across all courses */
  --purple:  #5B2D8E;
  --purple-l: #F0E8FA;
  --purple-m: #8B5CF6;
  --amber:   #854F0B;
  --amber-l: #FAEEDA;
  --amber-m: #EF9F27;
  --slate:   #6B7685;
  --slate-l: #ECEEF1;

  /* Neutrals — constant across all pages */
  --navy:    #1A0009;
  --text:    #1a1a18;
  --text2:   #5a5955;
  --text3:   #9e9d98;
  --bg:      #ffffff;
  --bg2:     #f4f5f7;
  --border:  rgba(0,0,0,0.09);
  --border2: rgba(0,0,0,0.15);
  --content-max-width: 1280px;
  --accordion-separator-width: 2px;
  --accordion-body-padding: 10px 20px 20px;
  --accordion-grid-top-padding: 16px;
  --r:       12px;
  --shadow:  0 2px 12px rgba(0,0,0,0.07), 0 1px 3px rgba(0,0,0,0.05);
  --shadow-h: 0 8px 32px rgba(0,0,0,0.13), 0 2px 8px rgba(0,0,0,0.08);

  /* Typography utilities */
  --sys-font-ui: -apple-system, sans-serif;
  --sys-label-size: 10px;
  --sys-subtitle-size: 11px;

  /* Shared course theme palettes */
  --course-cs112-accent: var(--red);
  --course-cs112-accent-soft: var(--red-l);
  --course-cs112-accent-strong: var(--red-m);
  --course-cs112-hover-shadow: rgba(206, 17, 65, 0.68);
  --course-cs112-header-bg: rgba(206, 17, 65, 0.045);
  --course-cs112-header-bg-hover: rgba(206, 17, 65, 0.08);
  --course-cs112-header-border: rgba(206, 17, 65, 0.14);

  --course-cs339-accent: #69A9DC;
  --course-cs339-accent-soft: #EAF4FC;
  --course-cs339-accent-strong: #3B84C0;
  --course-cs339-hover-shadow: rgba(105, 169, 220, 0.58);
  --course-cs339-header-bg: rgba(105, 169, 220, 0.05);
  --course-cs339-header-bg-hover: rgba(105, 169, 220, 0.09);
  --course-cs339-header-border: rgba(105, 169, 220, 0.15);

  --course-cs432-accent: #0078D4;
  --course-cs432-accent-soft: #E5F2FD;
  --course-cs432-accent-strong: #106EBE;
  --course-cs432-hover-shadow: rgba(0, 120, 212, 0.64);
  --course-cs432-header-bg: rgba(0, 120, 212, 0.05);
  --course-cs432-header-bg-hover: rgba(0, 120, 212, 0.09);
  --course-cs432-header-border: rgba(0, 120, 212, 0.16);

  --course-ai100-accent: #2C8A56;
  --course-ai100-accent-soft: #EDF8F1;
  --course-ai100-accent-strong: #68A884;
  --course-ai100-hover-shadow: rgba(44, 138, 86, 0.62);
  --course-ai100-header-bg: rgba(44, 138, 86, 0.035);
  --course-ai100-header-bg-hover: rgba(44, 138, 86, 0.06);
  --course-ai100-header-border: rgba(44, 138, 86, 0.12);

  /* Generic page accent hook used by shared components like hero.css */
  --course-page-accent: var(--teal);
  --course-page-accent-soft: var(--teal-l);
  --course-page-accent-strong: var(--teal-m);
}

.course-theme-cs112,
body.theme-cs112 {
  --semester-badge-ink: #A50D33;
  --course-accent: var(--course-cs112-accent);
  --course-accent-soft: var(--course-cs112-accent-soft);
  --course-accent-strong: var(--course-cs112-accent-strong);
  --course-card-hover-shadow: var(--course-cs112-hover-shadow);
  --course-card-header-bg: var(--course-cs112-header-bg);
  --course-card-header-bg-hover: var(--course-cs112-header-bg-hover);
  --course-card-header-border: var(--course-cs112-header-border);
  --course-card-em-color: var(--course-cs112-accent);
  --card-hover-shadow: var(--course-cs112-hover-shadow);
  --course-header-bg: var(--course-cs112-header-bg);
  --course-header-bg-hover: var(--course-cs112-header-bg-hover);
  --course-header-border: var(--course-cs112-header-border);
  --course-em-color: var(--course-cs112-accent);
}

.course-theme-cs339,
body.theme-cs339 {
  --semester-badge-ink: #285F8C;
  --course-accent: var(--course-cs339-accent);
  --course-accent-soft: var(--course-cs339-accent-soft);
  --course-accent-strong: var(--course-cs339-accent-strong);
  --course-card-hover-shadow: var(--course-cs339-hover-shadow);
  --course-card-header-bg: var(--course-cs339-header-bg);
  --course-card-header-bg-hover: var(--course-cs339-header-bg-hover);
  --course-card-header-border: var(--course-cs339-header-border);
  --course-card-em-color: var(--course-cs339-accent);
  --card-hover-shadow: var(--course-cs339-hover-shadow);
  --course-header-bg: var(--course-cs339-header-bg);
  --course-header-bg-hover: var(--course-cs339-header-bg-hover);
  --course-header-border: var(--course-cs339-header-border);
  --course-em-color: var(--course-cs339-accent);
}

.course-theme-cs432,
body.theme-cs432 {
  --semester-badge-ink: #0B5FA5;
  --course-accent: var(--course-cs432-accent);
  --course-accent-soft: var(--course-cs432-accent-soft);
  --course-accent-strong: var(--course-cs432-accent-strong);
  --course-card-hover-shadow: var(--course-cs432-hover-shadow);
  --course-card-header-bg: var(--course-cs432-header-bg);
  --course-card-header-bg-hover: var(--course-cs432-header-bg-hover);
  --course-card-header-border: var(--course-cs432-header-border);
  --course-card-em-color: var(--course-cs432-accent);
  --card-hover-shadow: var(--course-cs432-hover-shadow);
  --course-header-bg: var(--course-cs432-header-bg);
  --course-header-bg-hover: var(--course-cs432-header-bg-hover);
  --course-header-border: var(--course-cs432-header-border);
  --course-em-color: var(--course-cs432-accent);
}

.course-theme-ai100,
body.theme-ai100 {
  --semester-badge-ink: #236E45;
  --course-accent: var(--course-ai100-accent);
  --course-accent-soft: var(--course-ai100-accent-soft);
  --course-accent-strong: var(--course-ai100-accent-strong);
  --course-card-hover-shadow: var(--course-ai100-hover-shadow);
  --course-card-header-bg: var(--course-ai100-header-bg);
  --course-card-header-bg-hover: var(--course-ai100-header-bg-hover);
  --course-card-header-border: var(--course-ai100-header-border);
  --course-card-em-color: var(--course-ai100-accent);
  --card-hover-shadow: var(--course-ai100-hover-shadow);
  --course-header-bg: var(--course-ai100-header-bg);
  --course-header-bg-hover: var(--course-ai100-header-bg-hover);
  --course-header-border: var(--course-ai100-header-border);
  --course-em-color: var(--course-ai100-accent);
}

body.theme-cs112 {
  --teal: var(--course-cs112-accent);
  --teal-l: var(--course-cs112-accent-soft);
  --teal-m: var(--course-cs112-accent-strong);
  --course-page-accent: var(--course-cs112-accent);
  --course-page-accent-soft: var(--course-cs112-accent-soft);
  --course-page-accent-strong: var(--course-cs112-accent-strong);
}

body.theme-cs339 {
  --red: var(--course-cs339-accent);
  --red-l: var(--course-cs339-accent-soft);
  --red-m: var(--course-cs339-accent-strong);
  --course-page-accent: var(--course-cs339-accent);
  --course-page-accent-soft: var(--course-cs339-accent-soft);
  --course-page-accent-strong: var(--course-cs339-accent-strong);
}

body.theme-cs432 {
  --teal: var(--course-cs432-accent);
  --teal-l: var(--course-cs432-accent-soft);
  --teal-m: var(--course-cs432-accent-strong);
  --course-page-accent: var(--course-cs432-accent);
  --course-page-accent-soft: var(--course-cs432-accent-soft);
  --course-page-accent-strong: var(--course-cs432-accent-strong);
}

body.theme-ai100 {
  --teal: var(--course-ai100-accent);
  --teal-l: var(--course-ai100-accent-soft);
  --teal-m: var(--course-ai100-accent-strong);
  --course-page-accent: var(--course-ai100-accent);
  --course-page-accent-soft: var(--course-ai100-accent-soft);
  --course-page-accent-strong: var(--course-ai100-accent-strong);
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Georgia', 'Times New Roman', serif;
  min-height: 100vh;
  line-height: 1.6;
}