/* Frappe and LMS portal tokens, pointed at the Miftahun palette.
 *
 * MOVED HERE 2026-09-05 from education/scripts/brand-theme.css, which
 * white_label.py injected into `Website Settings.head_html` -- a stylesheet
 * living in the database, re-applied by a script after every migrate, and
 * hand-maintained in parallel with the theme it was supposed to match.
 *
 * That parallel copy is not theoretical. On 4 Sep 2026 the theme was converted
 * to a new palette and deployed correctly, and every primary button on this
 * product stayed green -- because this file still said green and, injected into
 * head_html, outranked the app stylesheet with !important. Two of its dark-theme
 * values were still the OLD GOLD (#B8823F, #DCB694) for a further day after
 * that, missed by the same conversion.
 *
 * IT MAPS, IT DOES NOT DEFINE. Every colour now reads a theme token with a
 * literal fallback -- var(--mt-rail, #14191A). When the Estate skin is applied
 * the theme is the single source; the fallback covers the moment before
 * web_theme.js stamps data-mt-skin, and any page where it never runs. Changing
 * the palette in the theme now changes this file's output without editing it.
 *
 * SCOPE, measured rather than assumed: this reaches the login page and website
 * pages. It does NOT reach the LMS SPA -- checked in the browser on
 * /lms/courses, where --primary and --lms-primary both resolve to empty. The
 * SPA is themed by portal.css, which deploy/Dockerfile.theme links into
 * _lms.html directly, because that shell renders no hooks at all.
 *
 * WHY IT IS IN THIS APP AND NOT THE THEME: --lms-primary and the LMS progress
 * bars are this product's concern, and miftahun_theme is vendored whole into
 * healthcare and mall-platform. Same rule that moved pupil_scope.py here.
 */

/* !important is kept, though the reason changed. It was load-bearing when this
 * was injected into head_html, which lands BEFORE Frappe's bundle. As a
 * web_include_css asset it now lands after, so source order would win on its
 * own -- but Frappe's own portal CSS marks several of these important too, and
 * dropping it here would be a silent regression on exactly the pages that
 * matter most. Kept deliberately, not by inheritance. */
:root,
:root[data-theme="light"] {
  --brand: var(--mt-rail, #14191A);        /* the rail green -- solid surfaces, buttons  */
  --brand-dark: var(--mt-rail-hi, #0B0F10);   /* its hover, the desk's selected-row fill    */
  --brand-accent: var(--mt-rail-brand, #58C2AB); /* the icon gold -- marks, focus, progress    */

  /* Frappe portal tokens. v16 uses --primary as the near-black accent for
   * primary actions; pointing it at the rail green is the single
   * highest-leverage change here. */
  --primary: var(--mt-rail, #14191A) !important;
  --primary-color: var(--mt-rail, #14191A) !important;
  --brand-color: var(--mt-rail, #14191A) !important;
  --btn-primary-bg: var(--mt-rail, #14191A) !important;
  --text-on-primary: #ffffff !important;   /* white on #14191A = 17.74:1 (was 11.8:1 on the old green) */

  /* LMS tokens */
  --lms-primary: var(--mt-rail, #14191A) !important;
  --primary-button-bg: var(--mt-rail, #14191A) !important;
  --link-color: #0B0F10 !important;   /* darker: link text on white */
}

:root[data-theme="dark"] {
  /* Lift for contrast on dark: the rail green goes muddy against a dark
   * ground, so the ACCENT carries the brand there instead of the green. */
  --brand: #58C2AB;
  --brand-dark: #3C9B8F;   /* was the old gold #B8823F until 2026-09-05; 5.61:1 on the dark ground */
  --primary: #58C2AB !important;
  --primary-color: #58C2AB !important;
  --brand-color: #58C2AB !important;
  --btn-primary-bg: #58C2AB !important;
  --lms-primary: #58C2AB !important;
  --link-color: #7BD3BF !important;  /* was the old gold #DCB694; 10.64:1 on the dark ground */
}

/* The login card's submit button is .btn-login (with .btn-default), NOT
 * .btn-primary — confirmed by inspecting the rendered page. Without this the
 * most-seen unauthenticated button stays upstream near-black. */
.btn-login,
.btn-default.btn-login,
button.btn-login {
  background-color: var(--brand) !important;
  border-color: var(--brand) !important;
  color: #fff !important;
}

.btn-login:hover,
.btn-default.btn-login:hover {
  background-color: var(--brand-dark) !important;
  border-color: var(--brand-dark) !important;
}

/* Primary actions. Frappe ships several button class names across portal and
 * LMS; cover them together rather than chasing each template. */
.btn-primary,
.button-primary,
.btn.btn-primary,
button.btn-primary {
  background-color: var(--brand) !important;
  border-color: var(--brand) !important;
  color: #fff !important;
}

.btn-primary:hover,
.button-primary:hover,
.btn.btn-primary:hover {
  background-color: var(--brand-dark) !important;
  border-color: var(--brand-dark) !important;
}

/* Links inside content, but never navbar/footer links — those inherit their own
 * colours and turning them navy-on-navy makes them vanish. */
.page-content a:not(.btn),
.lms-content a:not(.btn),
article a:not(.btn) {
  color: var(--brand);
}

/* Focus ring — accessibility: must stay visible, so use the accent, not the
 * navy, which is too close to the surrounding chrome. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--brand-accent);
  outline-offset: 2px;
}

/* Login card: the single most-seen unauthenticated page. */
.page-card .btn-primary,
.login-content .btn-primary {
  background-color: var(--brand) !important;
  border-color: var(--brand) !important;
}

/* Progress/completion indicators in the LMS read as "achievement" — accent. */
.progress-bar,
.lms-progress-bar > div {
  background-color: var(--brand-accent) !important;
}

/* Upstream sometimes hard-codes its own indigo on badges/pills. */
.indicator-pill.blue,
.badge-primary {
  background-color: var(--brand) !important;
  color: #fff !important;
}

/* On the dark theme --primary is the GOLD, and white on it is 2.16:1. The label
 * has to flip with the background or the most-clicked button on the portal
 * becomes unreadable -- the same trap portal.css documents for the solid blue.
 * Re-measured after the conversion: #04211D on #58C2AB is 7.84:1. */
:root[data-theme="dark"] .btn-login,
:root[data-theme="dark"] .btn-primary,
:root[data-theme="dark"] .button-primary,
:root[data-theme="dark"] button.btn-primary { color: #04211D !important; }
