/*
 * Takwinx LMS look (specs/019-client-branding, phase 3).
 * Mockup: docs/design/mockups/lms.html.
 *
 * Colours come ONLY from the --tx-* variables (contracts/tenant-theme.md). The
 * defaults below are the Takwinx palette; /files/takwinx-brand.css, written per
 * site by client-new.sh step 7b and loaded after this file, overrides them. A
 * site with no such file (the academy) keeps the Takwinx colours.
 *
 * HOW IT HOOKS IN. Frappe UI paints everything from its own design tokens
 * (--surface-*, --ink-*, --outline-*) and Tailwind classes named after them.
 * We remap tokens where the meaning is "accent" (Frappe UI's blue) and target
 * the few class names that mean "primary" (bg-surface-gray-10 on a button or
 * a progress bar). Light theme only: a user who picks dark mode keeps Frappe's
 * dark palette, with the brand on primary buttons and on the quiz's chosen
 * answer (the one rule here with a dark variant).
 *
 * ⚠ CLASS NAMES ARE UPSTREAM'S. An LMS upgrade can rename them; nothing breaks,
 *   the look just quietly falls back to Frappe's. frappe/README.md §LMS look has
 *   the check to run after every upgrade.
 */
@import url(takwinx-fonts/fonts.css);

:root{
  --tx-brand:#16506b; --tx-brand-night:#0f3d52; --tx-on-night:#ffffff; --tx-brand-ink:#16506b;
  --tx-brand-soft:#eaf4f9; --tx-on-brand:#ffffff; --tx-cta:#f58220; --tx-on-cta:#1b1206;
}

/* --- type ---------------------------------------------------------------- */
html{font-family:"Readex Pro",InterVar,ui-sans-serif,system-ui,sans-serif}

/* --- neutrals: Frappe's pure greys, tinted toward the Takwinx ink ---------- */
:root:not([data-theme=dark]){
  --ink-gray-9:#122a36; --ink-gray-8:#1f3644; --ink-gray-7:#3b4d59;
  --ink-gray-6:#4a6070; --ink-gray-5:#5b7080;
  --surface-sidebar:#fbfcfd;
  --outline-gray-1:#e6eff4; --outline-gray-2:#dbe8ef; --outline-gray-3:#bcd3de;

  /* Frappe UI's accent is blue (links, "Start now", info badges, focus):
     make it the client's colour. */
  --surface-blue-1:var(--tx-brand-soft); --surface-blue-2:var(--tx-brand-soft);
  --surface-blue-3:color-mix(in srgb,var(--tx-brand) 18%,#fff);
  --surface-blue-4:color-mix(in srgb,var(--tx-brand) 26%,#fff);
  --ink-blue-4:var(--tx-brand-ink); --ink-blue-5:var(--tx-brand-ink);
  --ink-blue-6:var(--tx-brand-ink); --ink-blue-7:var(--tx-brand-ink);
  --ink-blue-link:var(--tx-brand-ink);
  --outline-blue-1:var(--tx-brand);
}

/* --- primary actions: the client's action colour --------------------------- */
button.bg-surface-gray-10, a.bg-surface-gray-10{
  background-color:var(--tx-cta)!important; color:var(--tx-on-cta)!important;
}
button.bg-surface-gray-10:hover, a.bg-surface-gray-10:hover{
  background-color:color-mix(in srgb,var(--tx-cta) 88%,#000)!important;
}
button.bg-surface-gray-10 :is(svg,span), a.bg-surface-gray-10 :is(svg,span){color:inherit}

/* --- progress: brand fill --------------------------------------------------- */
.bg-surface-gray-10.rounded-full{background-color:var(--tx-brand)!important}

/* --- sidebar: the current page in the brand's soft tint --------------------- */
:root:not([data-theme=dark]) .bg-surface-sidebar nav button.bg-surface-elevation-3,
:root:not([data-theme=dark]) .bg-surface-sidebar nav a.bg-surface-elevation-3{
  background-color:var(--tx-brand-soft)!important; box-shadow:none!important;
  color:var(--tx-brand-ink)!important; font-weight:600;
}
:root:not([data-theme=dark]) .bg-surface-sidebar nav .bg-surface-elevation-3 svg{color:var(--tx-brand-ink)!important}

/* --- focus: visible, in the brand ------------------------------------------- */
:root:not([data-theme=dark]) :is(button,a,input,textarea,select):focus-visible{
  outline:2px solid var(--tx-brand); outline-offset:2px;
}

/* --- quiz: the chosen answer (owner's walk-through, 2026-10-08) --------------
   Upstream paints every option the same grey and the chosen radio near-black,
   which is invisible in dark mode. The chosen option gets the client's main
   colour as a 2px border and a tint, a larger filled radio or box, bold text
   and a tick at the end of the line: three cues that are not colour (WCAG
   1.4.1). --tx-brand-ink, not --tx-cta: the action colour (Takwinx orange) is
   under 3:1 on white, too faint for a border (WCAG 1.4.11). Logical
   properties, so Arabic mirrors. Upstream markup: components/Quiz.vue, a
   <label class="… bg-surface-gray-3 rounded-md …"> around the input. */
label.bg-surface-gray-3.rounded-md:has(> input:is([type=radio],[type=checkbox])){
  border:2px solid transparent;
}
label.bg-surface-gray-3.rounded-md > input:is([type=radio],[type=checkbox]){
  width:1.125rem!important; height:1.125rem!important;
}
label.bg-surface-gray-3.rounded-md:has(> input:checked){
  --tx-pick:var(--tx-brand-ink);
  border-color:var(--tx-pick);
  background-color:color-mix(in srgb,var(--tx-pick) 12%,transparent)!important;
}
label.bg-surface-gray-3.rounded-md > input:checked{color:var(--tx-pick)!important; border-color:var(--tx-pick)!important}
label.bg-surface-gray-3.rounded-md:has(> input:checked) > span{font-weight:600}
label.bg-surface-gray-3.rounded-md:has(> input:checked)::after{
  content:""; flex:none; width:.5rem; height:.95rem; margin-inline-start:.75rem; margin-block-start:-.2rem;
  border:solid var(--tx-pick); border-width:0 3px 3px 0; transform:rotate(45deg);
}
label.bg-surface-gray-3.rounded-md:has(> input:focus-visible){outline:2px solid var(--tx-pick,var(--tx-brand)); outline-offset:2px}
/* dark: the main colour lightened toward white, so the border keeps 3:1 on
   Frappe's dark surfaces whatever the client's colour */
[data-theme=dark] label.bg-surface-gray-3.rounded-md:has(> input:checked){
  --tx-pick:color-mix(in srgb,var(--tx-brand) 45%,#fff);
}