/*
 * Atom B2B reskin - shared by both frames (atom-staff.css, atom-learner.css load after this).
 * Brand colours arrive as --b-* variables from AtomTheme::head(); --t-* are the neutral tokens.
 * Dark mode = Wayne's learndirect v3 palette, switched by data-theme on <html>.
 */

:root {
    --t-bg: #F3F5FD; --t-sf: #fff; --t-s2: #F7F9FF; --t-ln: #EEF1F9; --t-ln2: #E6E9F3; --t-lns: #CBD2E3;
    --t-tx: #0c1330; --t-tx1: #253041; --t-tx2: #334155; --t-tx3: #5b6478; --t-tx4: #9AA3B5;
    --t-ok: #12704A; --t-okS: #DDF5E8; --t-wn: #8A5A00; --t-wnS: #FFF3D6; --t-er: #9B1C30; --t-erS: #FDEEEF; --t-in: #1E56D9; --t-inS: #E3ECFF;
    /* Solid fills for meaning buttons (fill + ink pass 4.5:1) */
    --t-okF: #12704A; --t-okFi: #fff; --t-wnF: #F5B83D; --t-wnFi: #2B1D00; --t-erF: #B4233B; --t-erFi: #fff;
    --t-shadow: 0 1px 2px rgba(12,19,48,.04), 0 12px 32px -18px rgba(12,19,48,.18);
    --t-font: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --t-display: Montserrat, system-ui, -apple-system, 'Segoe UI', sans-serif;
}
:root[data-theme="dark"] {
    color-scheme: dark;
    --t-bg: #05061F; --t-sf: #0A0E33; --t-s2: #121848; --t-ln: #1E2660; --t-ln2: #1E2660; --t-lns: #2E3878;
    --t-tx: #F3F5FB; --t-tx1: #DDE2F0; --t-tx2: #C3CAE0; --t-tx3: #98A3C7; --t-tx4: #6F7AA3;
    --t-ok: #5BE49B; --t-okS: rgba(91,228,155,.14); --t-wn: #FFC94D; --t-wnS: rgba(255,201,77,.14); --t-er: #FF8DA1; --t-erS: rgba(255,141,161,.14); --t-in: #8FB4FF; --t-inS: rgba(143,180,255,.14);
    --t-okF: #2FBF7F; --t-okFi: #04140C; --t-wnF: #FFC94D; --t-wnFi: #2B1D00; --t-erF: #FF8DA1; --t-erFi: #2A0710;
    --t-shadow: 0 1px 2px rgba(0,0,0,.3), 0 12px 32px -18px rgba(0,0,0,.6);
}

/* Meaning buttons keep their own ink when the old markup adds .text-white: the fills turn light in dark mode
   (white on the pink "I'll complete this next time" / green "Save Photo and Continue" was about 2:1). */
:root .btn.btn-success.text-white { color: var(--t-okFi) !important; }
:root .btn.btn-danger.text-white { color: var(--t-erFi) !important; }
:root .btn.btn-warning.text-white { color: var(--t-wnFi) !important; }

/* Placeholders: the old pages' #a3afb7 is about 2.2:1 on white (enrolment form, mail, assignment answers). */
:root ::placeholder, :root .form-control::placeholder, :root input::placeholder, :root textarea::placeholder { color: var(--t-tx3); opacity: 1; }

/* Theme switch (added by atom-theme.js) */
.atom-tg-item { display: flex; align-items: center; margin: 0 6px 0 14px; }
.atom-tg { display: inline-flex; align-items: center; gap: 2px; padding: 3px; border-radius: 999px; background: var(--t-s2); border: 1px solid var(--t-ln2); }
.atom-tg button { display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 999px; background: none; color: var(--t-tx3); cursor: pointer; }
.atom-tg button[aria-pressed="true"] { background: var(--t-sf); color: var(--t-tx); box-shadow: 0 1px 3px rgba(12,19,48,.25); }
.atom-ico { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.atom-tg-wide { display: flex; width: 100%; box-sizing: border-box; }
.atom-tg-wide button { flex: 1; width: auto; gap: 6px; display: flex; justify-content: center; font: 700 13px var(--t-font); min-height: 36px; }
.atom-tg-wide button[aria-pressed="true"] { background: var(--b-btn); color: var(--b-btn-ink); }
.atom-tg-row { padding: 12px 16px 14px; border-top: 1px solid var(--t-ln); }
.atom-tg-label { display: block; margin-bottom: 8px; font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--t-tx3); }
@media (max-width: 767px) { .atom-tg-item { display: none; } }