/* =========================================================================
 * authentik-brand.css — the Academy's brand skin for Frappe Learning.
 * GENERATED by server/academy/brand/build-brand-css.py. Do not edit by hand:
 * re-run the generator, which re-reads the ramp the running LMS ships.
 *
 * Served by nginx at /authentik-brand.css and injected into /lms by a
 * sub_filter in the vhost, because the LMS is a Vue app that ignores
 * Frappe's own head_html (proven with a marker on 2026-09-06).
 *
 * Accent hue 228.0deg, chroma x0.62. Lightness UNCHANGED from
 * upstream on every step, which is what keeps contrast as designed.
 * ========================================================================= */

/* --- Type ------------------------------------------------------------- */
/* Self-hosted, same files and weights the website uses. No Google Fonts
   request: the site makes zero third-party requests and the Academy should
   not be the exception. OFL — licences ship alongside the woff2 files. */
@font-face {
  font-family: "Raleway";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/academy-brand/fonts/raleway-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Raleway";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/academy-brand/fonts/raleway-latin-500-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Raleway";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/academy-brand/fonts/raleway-latin-600-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Raleway";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/academy-brand/fonts/raleway-latin-700-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Oswald";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/academy-brand/fonts/oswald-latin-500-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Oswald";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/academy-brand/fonts/oswald-latin-600-normal.woff2") format("woff2");
}

:root, [data-theme=dark] {
  /* Raleway is the website's body face. It is applied through the app's own
     font variables where they exist, and as a plain family otherwise, so
     nothing depends on a class name that a future LMS build might rename. */
  --font-sans: "Raleway", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --fui-font-sans: "Raleway", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
}

body, .frappe-ui, [class*='fui-'] {
  font-family: "Raleway", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* Oswald for headings only — it is a condensed display face and is wrong for
   dense UI text, which is why it is scoped rather than set on body. */
h1, h2, h3 {
  font-family: "Oswald", ui-sans-serif, system-ui, sans-serif;
  letter-spacing: 0.01em;
}

/* --- Accent ramp, light ------------------------------------------------ */
:root {
  --ink-blue-1: oklch(1.000 0 0);
  --ink-blue-10: oklch(0.396 0.070 228.0);
  --ink-blue-2: oklch(0.960 0.013 228.0);
  --ink-blue-3: oklch(0.925 0.024 228.0);
  --ink-blue-4: oklch(0.880 0.038 228.0);
  --ink-blue-5: oklch(0.730 0.075 228.0);
  --ink-blue-6: oklch(0.641 0.115 228.0);
  --ink-blue-7: oklch(0.587 0.108 228.0);
  --ink-blue-8: oklch(0.561 0.104 228.0);
  --ink-blue-9: oklch(0.477 0.092 228.0);
  --outline-blue-1: oklch(0.960 0.013 228.0);
  --outline-blue-10: oklch(0.309 0.064 228.0);
  --outline-blue-2: oklch(0.925 0.024 228.0);
  --outline-blue-3: oklch(0.880 0.038 228.0);
  --outline-blue-4: oklch(0.730 0.075 228.0);
  --outline-blue-5: oklch(0.641 0.115 228.0);
  --outline-blue-6: oklch(0.587 0.108 228.0);
  --outline-blue-7: oklch(0.561 0.104 228.0);
  --outline-blue-8: oklch(0.477 0.092 228.0);
  --outline-blue-9: oklch(0.396 0.070 228.0);
  --surface-blue-1: oklch(0.976 0.007 228.0);
  --surface-blue-10: oklch(0.396 0.070 228.0);
  --surface-blue-2: oklch(0.960 0.013 228.0);
  --surface-blue-3: oklch(0.925 0.024 228.0);
  --surface-blue-4: oklch(0.880 0.038 228.0);
  --surface-blue-5: oklch(0.730 0.075 228.0);
  --surface-blue-6: oklch(0.641 0.115 228.0);
  --surface-blue-7: oklch(0.587 0.108 228.0);
  --surface-blue-8: oklch(0.561 0.104 228.0);
  --surface-blue-9: oklch(0.477 0.092 228.0);

  /* The link colour is PINNED to the website's own --color-link rather than
     taken from the ramp: it is 5.04:1 on white and already carries a WCAG
     argument in MIGRATION.md §21. The Academy should not invent a second
     blue for the same job. */
  --ink-blue-link: oklch(0.534 0.098 221.4); /* #007995 */
}

/* --- Accent ramp, dark -------------------------------------------------- */
[data-theme=dark] {
  --ink-blue-1: oklch(1.000 0 0);
  --ink-blue-10: oklch(0.896 0.024 228.0);
  --ink-blue-2: oklch(0.327 0.061 228.0);
  --ink-blue-3: oklch(0.397 0.073 228.0);
  --ink-blue-4: oklch(0.463 0.084 228.0);
  --ink-blue-5: oklch(0.538 0.095 228.0);
  --ink-blue-6: oklch(0.586 0.089 228.0);
  --ink-blue-7: oklch(0.671 0.096 228.0);
  --ink-blue-8: oklch(0.777 0.069 228.0);
  --ink-blue-9: oklch(0.849 0.039 228.0);
  --outline-blue-1: oklch(0.305 0.057 228.0);
  --outline-blue-10: oklch(0.896 0.024 228.0);
  --outline-blue-2: oklch(0.327 0.061 228.0);
  --outline-blue-3: oklch(0.397 0.073 228.0);
  --outline-blue-4: oklch(0.463 0.084 228.0);
  --outline-blue-5: oklch(0.538 0.095 228.0);
  --outline-blue-6: oklch(0.586 0.089 228.0);
  --outline-blue-7: oklch(0.671 0.096 228.0);
  --outline-blue-8: oklch(0.777 0.069 228.0);
  --outline-blue-9: oklch(0.849 0.039 228.0);
  --surface-blue-1: oklch(0.255 0.035 228.0);
  --surface-blue-10: oklch(0.849 0.039 228.0);
  --surface-blue-2: oklch(0.305 0.057 228.0);
  --surface-blue-3: oklch(0.327 0.061 228.0);
  --surface-blue-4: oklch(0.397 0.073 228.0);
  --surface-blue-5: oklch(0.463 0.084 228.0);
  --surface-blue-6: oklch(0.538 0.095 228.0);
  --surface-blue-7: oklch(0.586 0.089 228.0);
  --surface-blue-8: oklch(0.671 0.096 228.0);
  --surface-blue-9: oklch(0.777 0.069 228.0);

  /* ⚠️ NOT the website's #007995 here. That colour is designed against WHITE;
     on the dark surface (L≈0.205) it is far too dark to read. Same hue and
     chroma, lifted to the lightness upstream uses for a dark-mode link, so it
     is recognisably the same colour doing the same job. */
  --ink-blue-link: oklch(0.720 0.098 221.4);
}

/* --- The portal pages: /login and friends ------------------------------ */
/* ⚠️ THESE ARE NOT THE VUE APP. Frappe serves /login, /update-password and
   the rest as server-rendered pages with Bootstrap-ish class names, outside
   the token system entirely — so the accent ramp above does not reach them
   and their primary button renders near-black (rgb(23,23,23)), measured
   2026-09-06. That button is the first thing a new learner ever sees.

   `.btn-login` is used by exactly the two solid buttons on that page and
   NOT by the muted `.btn-forgot`, so it is the narrowest hook available.
   ⚠️ If Frappe renames it, the button quietly returns to black. That is a
   cosmetic fallback rather than a break, which is why it is acceptable to
   depend on a class name here and not anywhere that matters more. */
.btn-login,
.btn-login:focus {
  background-color: #0d4a74;  /* white on this is 9.32:1 */
  border-color: transparent;
  color: #fff;
}
.btn-login:hover {
  background-color: #0a3a5c;  /* one step darker, still >7:1 on white text */
}

/* --- The one place the brand orange is allowed -------------------------- */
/* Orange is a STATUS colour in frappe-ui (it means warning), so the ramp is
   left alone. This is our own class, applied to nothing by default — it
   exists so a future banner or CTA can carry the brand fill with the label
   colour the website already proved at 4.47:1. */
.authentik-cta {
  background: #f8a025;
  color: #0c4670; /* --color-on-orange, 4.73:1 */
}

/* --- Lesson images: no taller than a comfortable screenful ------------- */
/* The lesson page draws every uploaded image at the full width of the text
   column (`<img class="mb-4" width="100%">`, lms utils/upload.js). On Wix
   the same images were ~350px wide, so a portrait photo now filled the whole
   screen. Capped at 480px tall, centred, never upscaled. Approved by Craig
   on the image review page, 2026-09-23.

   Scoped to an image that is the whole of an editor block, which is exactly
   what the Upload block renders; nothing else in the app matches. ⚠️ If an
   LMS upgrade changes that markup, images simply go back to full width. */
.ce-block__content > div > img[width="100%"] {
  display: block;
  width: auto;
  max-width: 100%;
  max-height: 480px;
  margin-inline: auto;
}