/* ===== AUC CAMPUS LAYER v1 (2026-10-19) =====
   Maps ClassroomIO onto the same design system as the membership page and the forum.
   ClassroomIO themes through CSS variables (--primary, --main-primary-color, --border-color),
   so this overrides those first and only then touches components. Loaded by cio-inject-proxy. */

:root{
  --auc-bg:#F7F5EF; --auc-surface:#FFFFFF; --auc-surface-2:#FDFCF9;
  --auc-teal:#113C3D; --auc-teal-2:#1C5253; --auc-gold:#B8860B; --auc-gold-soft:#F6EED8;
  --auc-orange:#F3752B; --auc-ink:#1E2A2A; --auc-muted:#66756f;
  --auc-line:rgba(17,60,61,.12); --auc-line-2:rgba(17,60,61,.2);
  --auc-shadow:0 8px 28px rgba(17,60,61,.08); --auc-shadow-2:0 16px 40px rgba(17,60,61,.14);
  --auc-r:16px;

  /* ClassroomIO's own theming knobs */
  --primary:#113C3D;
  --primary-foreground:#F7F5EF;
  --main-primary-color:#113C3D;
  --border-color:rgba(17,60,61,.12);
  --border-color-hover:rgba(17,60,61,.28);
  --blockquote-color:#66756f;
  --task-completed-color:#66756f;
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]):not(.light-scheme){
    --auc-bg:#0E1616; --auc-surface:#17231F; --auc-surface-2:#13201F;
    --auc-teal:#8FD4C8; --auc-teal-2:#A7DFD5; --auc-gold:#E2BA55; --auc-gold-soft:#2A2620;
    --auc-orange:#FF8A3D; --auc-ink:#E8EEE9; --auc-muted:#A3B0AA;
    --auc-line:rgba(255,255,255,.10); --auc-line-2:rgba(255,255,255,.20);
    --auc-shadow:0 8px 28px rgba(0,0,0,.45); --auc-shadow-2:0 16px 40px rgba(0,0,0,.6);
    --primary:#8FD4C8; --primary-foreground:#0E1616; --main-primary-color:#8FD4C8;
    --border-color:rgba(255,255,255,.10); --border-color-hover:rgba(255,255,255,.24);
    --blockquote-color:#A3B0AA; --task-completed-color:#A3B0AA;
    color-scheme:dark;
  }
}

/* page ground and type */
body,.theme-container{background:var(--auc-bg)!important; color:var(--auc-ink)!important;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,Helvetica,Arial,sans-serif}
.theme-container h1,.theme-container h2,.theme-container h3,.theme-container h4{color:var(--auc-teal); letter-spacing:-.02em}
.theme-container a{color:var(--auc-teal-2)}
.theme-container a:hover{color:var(--auc-orange)}

/* the course grid reads as cards, like the membership page */
a[class*="ui:group"]{
  background:var(--auc-surface)!important;
  border:1px solid var(--auc-line)!important;
  border-radius:var(--auc-r)!important;
  box-shadow:var(--auc-shadow)!important;
  margin:8px!important;
  overflow:hidden!important;
  transition:transform .14s ease, box-shadow .14s ease, border-color .14s ease;
}
a[class*="ui:group"]:hover{transform:translateY(-2px); box-shadow:var(--auc-shadow-2)!important;
  border-color:var(--auc-line-2)!important}
a[class*="ui:group"] h3{color:var(--auc-teal)!important}
a[class*="ui:group"] p,a[class*="ui:group"] span{color:var(--auc-muted)}

/* buttons */
.theme-container button[class*="ui:bg-primary"],
.theme-container a[class*="ui:bg-primary"]{
  background:var(--auc-orange)!important; color:#1A1005!important;
  border-radius:999px!important; font-weight:750!important;
  box-shadow:0 8px 20px rgba(243,117,43,.26)!important;
}
.theme-container button[class*="ui:bg-primary"]:hover,
.theme-container a[class*="ui:bg-primary"]:hover{background:#FF8A3D!important; color:#1A1005!important}
.theme-container button:not([class*="ui:group"]){border-radius:999px!important}
/* course cards keep the content radius; a pill rule must never reach them */
a[class*="ui:group"]{border-radius:var(--auc-r)!important}

/* --- vertical rhythm (2026-10-19) ---
   The hero and the grid were separated by 124px of stacked padding: header padding-bottom 32,
   section padding-top 32, an almost-empty toolbar row 36 and its 24px margin. Tighten so the
   search sits close to the cards it filters. */
.theme-container header[class*="landing-bg"]{padding-bottom:0!important}
.theme-container header[class*="landing-bg"] > div{padding-bottom:18px!important}
.theme-container section{padding-top:16px!important;padding-bottom:28px!important}
.theme-container section > div[class*="mb-6"]{margin-bottom:4px!important;min-height:0!important}

/* sidebar, filters and inputs follow the palette */
aside{background:var(--auc-surface)!important; border-color:var(--auc-line)!important}
input,select,textarea{background:var(--auc-surface)!important; color:var(--auc-ink)!important;
  border:1px solid var(--auc-line-2)!important; border-radius:11px!important}
input::placeholder,textarea::placeholder{color:var(--auc-muted)!important}

/* lesson body */
.prose,.lesson-content,.theme-container article{color:var(--auc-ink)}
.theme-container blockquote{background:var(--auc-surface-2); border-left:4px solid var(--auc-gold);
  border-radius:0 10px 10px 0; color:var(--auc-muted)}
.theme-container code,.theme-container pre{background:var(--auc-surface-2); border:1px solid var(--auc-line); border-radius:10px}

/* --- ClassroomIO's own landing token set (this is what stayed light grey) ---
   The app paints its wrappers from --landing-bg / --landing-card, which are declared on an app
   container, not on :root, so they must be overridden on that container too. */
:root, body, .theme-container, [class*="ui:min-h-screen"]{
  --landing-bg:#F7F5EF !important;
  --landing-bg-section:#FDFCF9 !important;
  --landing-card:#FFFFFF !important;
  --landing-card-soft:#FDFCF9 !important;
  --landing-panel-bg-accent:#F6EED8 !important;
  --landing-fg:#1E2A2A !important;
  --landing-fg-muted:#66756F !important;
  --landing-fg-faint:#8A9691 !important;
  --landing-border:rgba(17,60,61,.12) !important;
  --landing-border-soft:rgba(17,60,61,.08) !important;
  --landing-divider:1px solid rgba(17,60,61,.12) !important;
  --landing-accent:#113C3D !important;
  --landing-accent-fg:#F7F5EF !important;
  --landing-button-primary-bg:#F3752B !important;
  --landing-button-primary-bg-hover:#FF8A3D !important;
  --landing-button-primary-fg:#1A1005 !important;
  --landing-button-secondary-bg:#FFFFFF !important;
  --landing-button-secondary-bg-hover:#FDFCF9 !important;
  --landing-button-secondary-fg:#113C3D !important;
  --landing-button-secondary-border:rgba(17,60,61,.18) !important;
  --landing-button-tertiary-fg:#113C3D !important;
  --landing-button-tertiary-bg-hover:#F6EED8 !important;
  --landing-radius-card:16px !important;
  --landing-radius-pill:999px !important;
  --landing-shadow-card:0 8px 28px rgba(17,60,61,.08) !important;
  --landing-glow:none !important;
}

@media (prefers-color-scheme: dark){
  :root, body, .theme-container, [class*="ui:min-h-screen"]{
    --landing-bg:#0E1616 !important;
    --landing-bg-section:#13201F !important;
    --landing-card:#17231F !important;
    --landing-card-soft:#13201F !important;
    --landing-panel-bg-accent:#2A2620 !important;
    --landing-fg:#E8EEE9 !important;
    --landing-fg-muted:#A3B0AA !important;
    --landing-fg-faint:#7C8A85 !important;
    --landing-border:rgba(255,255,255,.10) !important;
    --landing-border-soft:rgba(255,255,255,.07) !important;
    --landing-divider:1px solid rgba(255,255,255,.10) !important;
    --landing-accent:#FF8A3D !important;
    --landing-accent-fg:#1A1005 !important;
    --landing-button-primary-bg:#FF8A3D !important;
    --landing-button-primary-bg-hover:#FFA463 !important;
    --landing-button-primary-fg:#1A1005 !important;
    --landing-button-secondary-bg:rgba(255,255,255,.06) !important;
    --landing-button-secondary-bg-hover:rgba(255,255,255,.12) !important;
    --landing-button-secondary-fg:#E8EEE9 !important;
    --landing-button-secondary-border:rgba(255,255,255,.20) !important;
    --landing-button-tertiary-fg:#8FD4C8 !important;
    --landing-button-tertiary-bg-hover:rgba(255,255,255,.09) !important;
    --landing-shadow-card:0 8px 28px rgba(0,0,0,.45) !important;
  }
}
.theme-container, .theme-container > div, main{background-color:var(--auc-bg)!important}
/* ClassroomIO's own login/signup CTA is hardcoded blue */
a[href*="login"], a[href*="/signup"], button[class*="bg-blue"], a[class*="bg-blue"]{
  background:var(--auc-teal)!important; color:var(--auc-bg)!important;
  border-radius:999px!important; font-weight:700!important; border:0!important;
}
a[href*="login"]:hover, a[href*="/signup"]:hover{background:var(--auc-teal-2)!important; color:var(--auc-bg)!important}
/* search + utility buttons stop looking like supplier defaults */
input[type="search"], input[placeholder*="Search"]{
  background:var(--auc-surface)!important; border:1px solid var(--auc-line-2)!important;
  border-radius:999px!important; padding-left:16px!important; color:var(--auc-ink)!important;
}
.theme-container button:not([class*="ui:bg-primary"]):not([class*="ui:group"]){
  background:var(--auc-surface)!important; border:1px solid var(--auc-line-2)!important;
  color:var(--auc-teal)!important; font-weight:650!important;
}
.theme-container button:not([class*="ui:bg-primary"]):hover{border-color:var(--auc-teal)!important; background:var(--auc-surface-2)!important}


/* ===== AUC THEME OVERRIDE LAYER (2026-10-20) =====
   Explicit choice beats the OS. Set by auc-chrome.js as <html data-theme>. */
:root[data-theme="dark"]{
  --auc-bg:#0E1616 !important; --auc-surface:#17231F !important; --auc-surface-2:#13201F !important;
  --auc-teal:#8FD4C8 !important; --auc-teal-2:#A7DFD5 !important; --auc-gold:#E2BA55 !important; --auc-gold-soft:#2A2620 !important;
  --auc-orange:#FF8A3D !important; --auc-ink:#E8EEE9 !important; --auc-muted:#A3B0AA !important;
  --auc-line:rgba(255,255,255,.10) !important; --auc-line-2:rgba(255,255,255,.20) !important;
  --auc-shadow:0 8px 28px rgba(0,0,0,.45) !important; --auc-shadow-2:0 16px 40px rgba(0,0,0,.6) !important;
  --primary:#8FD4C8 !important; --primary-foreground:#0E1616 !important; --main-primary-color:#8FD4C8 !important;
  --border-color:rgba(255,255,255,.10) !important; --border-color-hover:rgba(255,255,255,.24) !important;
  --blockquote-color:#A3B0AA !important; --task-completed-color:#A3B0AA !important;
}
:root[data-theme="light"]{
  --auc-bg:#F7F5EF !important; --auc-surface:#FFFFFF !important; --auc-surface-2:#FDFCF9 !important;
  --auc-teal:#113C3D !important; --auc-teal-2:#1C5253 !important; --auc-gold:#B8860B !important; --auc-gold-soft:#F6EED8 !important;
  --auc-orange:#F3752B !important; --auc-ink:#1E2A2A !important; --auc-muted:#66756f !important;
  --auc-line:rgba(17,60,61,.12) !important; --auc-line-2:rgba(17,60,61,.2) !important;
  --auc-shadow:0 8px 28px rgba(17,60,61,.08) !important; --auc-shadow-2:0 16px 40px rgba(17,60,61,.14) !important;
  --auc-r:16px !important;
  --primary:#113C3D !important;
  --primary-foreground:#F7F5EF !important;
  --main-primary-color:#113C3D !important;
  --border-color:rgba(17,60,61,.12) !important;
  --border-color-hover:rgba(17,60,61,.28) !important;
  --blockquote-color:#66756f !important;
  --task-completed-color:#66756f !important;
}

/* ===== LIGHT MODE (CE 2026-10-20) =====
   ClassroomIO is a shadcn-style app: it paints text and surfaces from --background / --foreground /
   --card. Forcing those here is what makes a light choice actually light, and what makes the text
   readable instead of light-on-light. */
:root[data-theme="light"], html.light-scheme:not([data-theme="dark"]){
  --background:#F7F5EF!important; --foreground:#1E2A2A!important;
  --card:#FFFFFF!important; --card-foreground:#1E2A2A!important;
  --popover:#FFFFFF!important; --popover-foreground:#1E2A2A!important;
  --muted:#F1EFE8!important; --muted-foreground:#556662!important;
  --secondary:#EFEDE6!important; --secondary-foreground:#113C3D!important;
  --accent:#F1EFE8!important; --accent-foreground:#113C3D!important;
  --border:rgba(17,60,61,.16)!important; --input:rgba(17,60,61,.16)!important;
  --border-color:rgba(17,60,61,.16)!important; --border-color-hover:rgba(17,60,61,.28)!important;
  --sidebar-background:#FFFFFF!important; --sidebar-foreground:#1E2A2A!important;
  --sidebar-border:rgba(17,60,61,.12)!important;
}
:root[data-theme="light"] body, html.light-scheme:not([data-theme="dark"]) body{
  background:#F7F5EF!important; color:#1E2A2A!important;
}

/* The .dark class is added by the app before our attribute exists; an explicit light choice wins. */
html.dark[data-theme="light"], html.dark.light-scheme{
  --background:#F7F5EF!important; --foreground:#1E2A2A!important;
  --card:#FFFFFF!important; --card-foreground:#1E2A2A!important;
  --muted:#F1EFE8!important; --muted-foreground:#556662!important;
  --secondary:#EFEDE6!important; --secondary-foreground:#113C3D!important;
  --border:rgba(17,60,61,.16)!important; --border-color:rgba(17,60,61,.16)!important;
}
html.dark[data-theme="light"] body{background:#F7F5EF!important;color:#1E2A2A!important}

/* ===== LIGHT LANDING TOKENS (final) =====
   Higher specificity than the dark media block, so a light choice is genuinely light. */
html.light-scheme, html[data-theme="light"]{
  --landing-bg:#F7F5EF!important;
  --landing-bg-section:#FDFCF9!important;
  --landing-card:#FFFFFF!important;
  --landing-card-soft:#FDFCF9!important;
  --landing-panel-bg-accent:#F6EED8!important;
  --landing-fg:#1E2A2A!important;
  --landing-fg-muted:#5A6A66!important;
  --landing-fg-faint:#7C8A85!important;
  --landing-border:rgba(17,60,61,.14)!important;
  --landing-border-soft:rgba(17,60,61,.09)!important;
  --landing-divider:1px solid rgba(17,60,61,.14)!important;
  --landing-accent:#113C3D!important;
  --landing-accent-fg:#F7F5EF!important;
  --landing-button-primary-bg:#F3752B!important;
  --landing-button-primary-bg-hover:#FF8A3D!important;
  --landing-button-primary-fg:#1A1005!important;
}
html.light-scheme body, html[data-theme="light"] body,
html.light-scheme header[class*="landing-bg"], html[data-theme="light"] header[class*="landing-bg"]{
  background-color:#F7F5EF!important; color:#1E2A2A!important;
}
html.light-scheme .theme-container, html[data-theme="light"] .theme-container{
  background-color:#F7F5EF!important; color:#1E2A2A!important;
}

/* ===== READABLE MUTED COPY (light) =====
   Paragraph text under headings inherited the dark-theme muted colour and washed out on cream. */
html.light-scheme header[class*="landing-bg"] p,
html[data-theme="light"] header[class*="landing-bg"] p,
html.light-scheme .theme-container p,
html[data-theme="light"] .theme-container p{
  color:#4C5C58!important;
}
html.light-scheme .theme-container small,
html.light-scheme .theme-container .ui\:text-\[var\(--landing-fg-muted\)\],
html[data-theme="light"] .theme-container small{
  color:#4C5C58!important;
}

/* ===== LIGHT LANDING ON CONTAINERS =====
   Same containers as the dark block, so the app cannot inherit dark tokens in light mode. */
html.light-scheme, html[data-theme="light"],
html.light-scheme body, html[data-theme="light"] body,
html.light-scheme .theme-container, html[data-theme="light"] .theme-container,
html.light-scheme [class*="ui:min-h-screen"], html[data-theme="light"] [class*="ui:min-h-screen"]{
  --landing-bg:#F7F5EF!important;
  --landing-bg-section:#FDFCF9!important;
  --landing-card:#FFFFFF!important;
  --landing-card-soft:#FDFCF9!important;
  --landing-panel-bg-accent:#F6EED8!important;
  --landing-fg:#1E2A2A!important;
  --landing-fg-muted:#4C5C58!important;
  --landing-fg-faint:#6B7A76!important;
  --landing-border:rgba(17,60,61,.16)!important;
  --landing-border-soft:rgba(17,60,61,.10)!important;
  --landing-accent:#113C3D!important;
  --landing-accent-fg:#F7F5EF!important;
  --border:rgba(17,60,61,.16)!important;
  --foreground:#1E2A2A!important;
  --card-foreground:#1E2A2A!important;
  --muted-foreground:#4C5C58!important;
  --popover-foreground:#1E2A2A!important;
  --secondary-foreground:#113C3D!important;
  --accent-foreground:#113C3D!important;
}
/* Filter panel copy: labels and section headings were inheriting the dark ink. */
html.light-scheme label, html[data-theme="light"] label,
html.light-scheme .theme-container label, html[data-theme="light"] .theme-container label,
html.light-scheme .theme-container h3, html[data-theme="light"] .theme-container h3,
html.light-scheme .theme-container span, html[data-theme="light"] .theme-container span{
  color:#1E2A2A;
}
html.light-scheme .theme-container .text-muted-foreground,
html[data-theme="light"] .theme-container .text-muted-foreground{
  color:#4C5C58!important;
}