/* ================================================================
   ACAD_THEME — DOMINICAN LAITY DESIGN SYSTEM
   Lay Fraternities of Saint Dominic / Tertiary Academy
   "Veritas" — high-contrast black & white, retro-ecclesiastic.

   Source of truth: dominican-laity-design-system/colors_and_type.css
   from the Claude Design package (May 2026).

   Surfaces this stylesheet covers:
   - Portal www pages (web_include_css)
   - Frappe LMS Vue SPA at /lms (after_request injection)

   The /app desk is intentionally NOT covered (app_include_css is
   removed from hooks.py) so admins doing settings/bulk-data-entry
   work in default Frappe.
   ================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cardo:ital,wght@0,400;0,700;1,400&family=Lato:wght@400;700;900&display=swap');

/* ============================================================
   1. DESIGN TOKENS — Heraldic palette + Cardo/Lato type
   ============================================================ */
:root {
  /* Heraldic core — sable (black ink) and argent (off-white page) */
  --sable:        #0B0A08;
  --argent:       #FBFAF6;
  --pure-black:   #000000;
  --pure-white:   #FFFFFF;

  /* Neutrals — paper-leaning ink scale */
  --ink-900: #0B0A08;
  --ink-800: #1C1A16;
  --ink-700: #2E2A24;
  --ink-600: #4A443B;
  --ink-500: #6B6258;
  --ink-400: #8E867B;
  --ink-300: #B5AFA4;
  --ink-200: #D7D2C7;
  --ink-150: #E6E2D8;
  --ink-100: #EFEBE1;
  --ink-50:  #F5F1E7;
  --paper:   #FBFAF6;
  --vellum:  #F2EDDF;

  /* Accent — rubric crimson, for emphasis / seals / active state ONLY */
  --rubric:        #8A1B2B;
  --rubric-deep:   #5E0F1C;
  --rubric-tint:   #F3E4E6;

  /* Semantic — foreground */
  --fg:          var(--ink-900);
  --fg-strong:   var(--pure-black);
  --fg-muted:    var(--ink-600);
  --fg-subtle:   var(--ink-400);
  --fg-on-dark:  var(--argent);
  --fg-link:     var(--ink-900);
  --fg-accent:   var(--rubric);

  /* Semantic — background. LMS uses white; portal documents use paper. */
  --bg:           var(--paper);
  --bg-page:      var(--paper);
  --bg-elevated:  var(--pure-white);
  --bg-sunken:    var(--ink-100);
  --bg-vellum:    var(--vellum);
  --bg-inverse:   var(--sable);

  /* Per the LMS UI kit: web surfaces white, vellum reserved for accents */
  --lms-bg:        #ffffff;
  --lms-bg-accent: var(--vellum);

  /* Borders & rules — always black, never gray (except table sub-grids) */
  --rule:         var(--ink-900);
  --rule-soft:    var(--ink-300);
  --rule-faint:   var(--ink-200);

  /* Type families */
  --font-serif:   'Cardo', 'Adobe Caslon Pro', 'Garamond', 'EB Garamond',
                  'Times New Roman', Times, serif;
  --font-sans:    'Lato', -apple-system, BlinkMacSystemFont, 'Helvetica Neue',
                  Arial, sans-serif;
  --font-mono:    ui-monospace, 'SF Mono', 'Menlo', monospace;
  --font-display: var(--font-serif);
  --font-body:    var(--font-serif);
  --font-ui:      var(--font-sans);

  /* Type scale */
  --fs-display:    72px;
  --fs-h1:         48px;
  --fs-h2:         32px;
  --fs-h3:         24px;
  --fs-h4:         20px;
  --fs-lead:       21px;
  --fs-body:       18px;
  --fs-small:      16px;
  --fs-caption:    14px;
  --fs-overline:   12px;

  --lh-display:  1.05;
  --lh-heading:  1.18;
  --lh-body:     1.65;
  --lh-tight:    1.3;

  --tracking-tight:   -0.01em;
  --tracking-normal:   0;
  --tracking-wide:     0.06em;
  --tracking-caps:     0.16em;
  --tracking-mono:     0.04em;

  --fw-regular: 400;
  --fw-bold:    700;

  /* Spacing — 4px grid */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
  --space-9:  96px;

  /* Document widths */
  --measure-prose:   62ch;
  --measure-display: 22ch;

  /* Radii — print brand, almost none */
  --radius-none: 0;
  --radius-xs:   2px;
  --radius-sm:   3px;

  /* Rules */
  --rule-hairline: 1px solid var(--rule);
  --rule-heavy:    2px solid var(--rule);
  --rule-double:   3px double var(--rule);

  /* Motion — quiet, dignified */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast: 120ms;
  --duration-base: 200ms;
  --duration-slow: 320ms;

  /* Bootstrap / Frappe variable overrides */
  --primary:             var(--sable);
  --primary-color:       var(--sable);
  --bg-color:            var(--paper);
  --fg-color:            var(--pure-white);
  --text-color:          var(--ink-900);
  --text-muted:          var(--ink-600);
  --link-color:          var(--ink-900);
  --border-color:        var(--ink-200);
  --bs-primary:          var(--sable);
  --bs-link-color:       var(--ink-900);
  --bs-link-hover-color: var(--rubric);
  --bs-body-bg:          var(--paper);
  --bs-body-color:       var(--ink-900);
  --bs-body-font-family: var(--font-body);
  --bs-border-color:     var(--ink-200);
  --bs-border-radius:    0;
}

/* ============================================================
   2. GLOBAL TYPOGRAPHY & BACKGROUND
   ============================================================ */
body,
.web-page,
.page-content,
.web-list-area {
  font-family: var(--font-body);
  background-color: var(--paper);
  color: var(--ink-900);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, .h1 {
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  font-weight: var(--fw-bold);
  line-height: var(--lh-heading);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-strong);
}
h2, .h2 {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: var(--fw-bold);
  line-height: var(--lh-heading);
  color: var(--fg-strong);
}
h3, .h3 {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  color: var(--fg-strong);
}
h4, .h4 {
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  font-weight: var(--fw-bold);
  font-style: italic;
  line-height: var(--lh-tight);
  color: var(--fg-strong);
}
h5, .h5, h6, .h6 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  color: var(--fg-strong);
}

p { font-size: var(--fs-body); line-height: var(--lh-body); }

/* Italic is meaningful — Latin, Scripture, vessel/book names */
em, cite, i, .t-latin { font-style: italic; }

strong, b { font-weight: var(--fw-bold); }

/* Discreet, underlined links — never blue, hover shifts to rubric */
a {
  color: var(--fg-link);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color var(--duration-fast) var(--ease-standard);
}
a:hover {
  color: var(--rubric);
  text-decoration-thickness: 2px;
}

/* ============================================================
   3. NAVBAR — light by default, hairline border, Lato chrome
   Per LMS UI kit's .site-header treatment.
   ============================================================ */
.navbar,
.navbar-main,
.navbar-light {
  background: var(--paper) !important;
  color: var(--ink-900);
  border-bottom: 1px solid var(--rule);
  font-family: var(--font-ui);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  font-size: var(--fs-overline);
  font-weight: 900;
  padding: 14px 32px;
  box-shadow: none;
}

.navbar a,
.navbar .nav-link,
.navbar-brand {
  color: var(--fg-strong) !important;
  font-family: var(--font-ui);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  text-decoration: none;
  padding-bottom: 4px;
  border-bottom: 1px solid transparent;
  white-space: nowrap;
}

.navbar a:hover,
.navbar .nav-link:hover {
  color: var(--rubric) !important;
  border-bottom-color: var(--rubric);
  text-decoration: none;
}

.navbar a.active,
.navbar .nav-link.active,
.navbar a.is-active {
  color: var(--rubric) !important;
  border-bottom-color: var(--rubric);
}

.navbar-toggler {
  border-color: var(--ink-200);
  border-radius: 0;
}

.navbar .dropdown-menu {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 0;
  margin-top: 0;
  box-shadow: none;
}
.navbar .dropdown-item {
  color: var(--ink-900);
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.55rem 1.1rem;
}
.navbar .dropdown-item:hover {
  background: var(--vellum);
  color: var(--rubric);
}

/* ============================================================
   4. FOOTER — centered, italic Cardo "In Saint Dominic"
   ============================================================ */
.web-footer,
.web-footer-wrapper,
footer,
.footer,
#footer,
.lms-footer {
  background: var(--paper) !important;
  color: var(--ink-600) !important;
  border-top: 1px solid var(--rule);
  font-family: var(--font-body);
  padding: 32px !important;
  box-shadow: none;
}

.web-footer *,
.web-footer-wrapper *,
footer *,
.footer *,
#footer *,
.lms-footer * {
  color: var(--ink-600) !important;
}

.web-footer a:hover,
.web-footer-wrapper a:hover,
footer a:hover,
.footer a:hover,
#footer a:hover,
.lms-footer a:hover {
  color: var(--rubric) !important;
}

.web-footer h1, .web-footer h2, .web-footer h3,
.web-footer h4, .web-footer h5, .web-footer h6,
footer h1, footer h2, footer h3, footer h4, footer h5, footer h6 {
  font-family: var(--font-ui) !important;
  font-size: 10px !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  font-weight: 900 !important;
  color: var(--fg-strong) !important;
}

/* ============================================================
   5. BUTTONS — typeset, hard corners, sable/argent
   ============================================================ */
.btn {
  font-family: var(--font-ui);
  font-weight: 900;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  border-radius: 0;
  padding: 14px 22px;
  transition: background var(--duration-fast) var(--ease-standard),
              color var(--duration-fast) var(--ease-standard);
  border-width: 1px;
  border-style: solid;
  box-shadow: none;
  cursor: pointer;
}

.btn-primary,
.btn-dark {
  background: var(--sable);
  border-color: var(--sable);
  color: var(--argent);
}
.btn-primary:hover,
.btn-dark:hover {
  background: var(--argent);
  border-color: var(--sable);
  color: var(--sable);
}

.btn-default,
.btn-secondary,
.btn-outline-primary,
.btn-outline-secondary {
  background: transparent;
  border-color: var(--sable);
  color: var(--sable);
}
.btn-default:hover,
.btn-secondary:hover,
.btn-outline-primary:hover,
.btn-outline-secondary:hover {
  background: var(--sable);
  color: var(--argent);
  border-color: var(--sable);
}

.btn-light {
  background: var(--paper);
  border-color: var(--ink-200);
  color: var(--ink-900);
}

.btn-link {
  color: var(--ink-900);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-transform: none;
  letter-spacing: 0;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  border: none;
  background: transparent;
  padding: 12px 0;
}
.btn-link:hover { color: var(--rubric); }

/* Press: 1px inset border, label nudges 1px down. No scale transform. */
.btn:active {
  box-shadow: inset 0 0 0 1px var(--sable);
  transform: translateY(1px);
}

/* Focus: heraldic 2px sable outline at 2px offset */
.btn:focus,
.btn:focus-visible {
  outline: 2px solid var(--sable) !important;
  outline-offset: 2px !important;
  box-shadow: none !important;
}

/* ============================================================
   6. FORMS — hairline borders, Lato labels, hard corners
   ============================================================ */
.form-control,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="search"],
input[type="tel"],
input[type="url"],
select,
textarea {
  font-family: var(--font-body);
  background: var(--pure-white);
  border: 1px solid var(--ink-300);
  border-radius: var(--radius-sm);
  color: var(--ink-900);
  padding: 12px 14px;
  font-size: var(--fs-small);
  transition: border-color var(--duration-fast) var(--ease-standard);
  box-shadow: none;
}

.form-control:focus,
input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--sable);
  box-shadow: 0 0 0 2px var(--sable);
}

.form-control::placeholder,
input::placeholder,
textarea::placeholder {
  color: var(--ink-400);
  opacity: 1;
  font-style: italic;
}

label,
.control-label,
.form-label {
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--fg-muted);
  margin-bottom: 8px;
}

.form-check-input {
  border-radius: 0;
  border: 1px solid var(--ink-300);
  box-shadow: none;
}
.form-check-input:checked {
  background-color: var(--sable);
  border-color: var(--sable);
}
.form-check-input:focus {
  border-color: var(--sable);
  box-shadow: 0 0 0 2px var(--sable);
}

/* ============================================================
   7. LOGIN PAGE — sable bg + argent paper card
   Treated as a "section-opener title plate" / formal masthead
   moment per the design system's allowed inverse use.
   ============================================================ */
body:has(.for-login) {
  background: var(--sable) !important;
}

.for-login {
  background: var(--sable) !important;
  min-height: auto !important;
  padding: 3rem 1rem !important;
}

.for-login .page-card-head {
  text-align: center;
  margin-bottom: 1.5rem;
}
.for-login .page-card-head h4 {
  font-family: var(--font-ui) !important;
  color: var(--argent) !important;
  letter-spacing: 0.22em;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  margin-top: 1rem;
}

.for-login .page-card-head .app-logo,
.for-login .page-card-head img {
  width: 80px !important;
  height: 80px !important;
  max-width: 80px !important;
  max-height: 80px !important;
  object-fit: contain !important;
}

.for-login .page-card,
.for-login .login-content {
  background: var(--paper) !important;
  border: 1px solid var(--ink-300);
  border-radius: var(--radius-sm) !important;
  box-shadow: none;
  padding: 32px 28px;
  max-width: 440px;
  margin: 0 auto;
  position: relative;
}
/* Inner heraldic frame on the card */
.for-login .page-card::before,
.for-login .login-content::before {
  content: "";
  position: absolute;
  inset: 8px;
  border: 1px solid var(--ink-200);
  pointer-events: none;
}

.for-login .email-field,
.for-login .password-field {
  position: relative;
}

.for-login .field-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--ink-400);
  pointer-events: none;
  z-index: 2;
  width: 16px;
  height: 16px;
}

.for-login .form-control {
  font-family: var(--font-body) !important;
  font-size: var(--fs-small) !important;
  font-weight: 400 !important;
  font-style: normal !important;
  color: var(--ink-900) !important;
  background: var(--pure-white) !important;
  border: 1px solid var(--ink-300) !important;
  border-radius: var(--radius-sm) !important;
  box-shadow: none !important;
  padding: 12px 14px 12px 38px !important;
  width: 100%;
  transition: border-color var(--duration-fast) var(--ease-standard);
}

.for-login #login_password { padding-right: 4rem !important; }

.for-login .form-control:hover {
  border-color: var(--ink-400) !important;
}

.for-login .form-control:focus {
  outline: none !important;
  border-color: var(--sable) !important;
  box-shadow: 0 0 0 2px var(--sable) !important;
}

.for-login .form-control::placeholder {
  font-style: italic !important;
  color: var(--ink-400) !important;
}

.for-login .toggle-password {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-ui) !important;
  font-size: 10px !important;
  font-weight: 900 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: var(--ink-900) !important;
  cursor: pointer;
  z-index: 2;
  background: var(--pure-white) !important;
  padding: 0 4px !important;
}

.for-login .forgot-password-message {
  text-align: right !important;
  margin: 14px 0 0 !important;
  padding: 0 !important;
}
.for-login .forgot-password-message a {
  color: var(--ink-900) !important;
  font-family: var(--font-ui) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  font-style: normal !important;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.for-login .forgot-password-message a:hover {
  color: var(--rubric) !important;
}

.for-login .btn-login,
.for-login .btn-primary {
  background: var(--sable) !important;
  color: var(--argent) !important;
  border: 1px solid var(--sable) !important;
  border-radius: var(--radius-sm) !important;
  font-family: var(--font-ui) !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  padding: 14px 22px !important;
  box-shadow: none !important;
}
.for-login .btn-login:hover,
.for-login .btn-primary:hover {
  background: var(--argent) !important;
  border-color: var(--sable) !important;
  color: var(--sable) !important;
}

.for-login .login-divider {
  font-family: var(--font-body) !important;
  font-style: italic;
  color: var(--ink-500) !important;
  margin: 20px 0 !important;
}

.for-login .btn-default,
.for-login .btn-login-option {
  background: transparent !important;
  color: var(--ink-900) !important;
  border: 1px solid var(--ink-300) !important;
  border-radius: var(--radius-sm) !important;
  font-family: var(--font-ui) !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  padding: 12px 16px !important;
  box-shadow: none !important;
}
.for-login .btn-default:hover,
.for-login .btn-login-option:hover {
  background: var(--vellum) !important;
  border-color: var(--sable) !important;
}
.for-login .btn-login-option svg { color: var(--ink-900); }

/* ============================================================
   8. CARDS — bordered region on the page; never floating
   ============================================================ */
.card,
.web-card {
  background: var(--pure-white);
  border: 1px solid var(--ink-200);
  border-radius: 0;
  box-shadow: none;
  transition: border-color var(--duration-base) var(--ease-standard);
}
.card:hover,
.web-card:hover {
  border-color: var(--sable);
  box-shadow: none;
}

.card-title,
.web-card-title {
  font-family: var(--font-display);
  letter-spacing: var(--tracking-normal);
  color: var(--fg-strong);
  font-weight: var(--fw-bold);
}

.card-body { padding: var(--space-6); }

/* ============================================================
   9. TABLES — hairlines, Lato 900 small-caps headers
   ============================================================ */
table,
.table {
  font-family: var(--font-body);
  border-color: var(--ink-200);
  font-size: var(--fs-small);
}

.table thead th {
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  background: var(--paper);
  color: var(--fg-muted);
  border: none;
  border-bottom: 2px solid var(--rule);
  padding: 12px 16px;
}

.table tbody td {
  border-top: 1px solid var(--ink-150);
  padding: 12px 16px;
}

.table-striped tbody tr:nth-of-type(odd) {
  background: var(--paper);
}

/* ============================================================
   10. BADGES & TAGS — Lato 900 small caps, hard corners
   ============================================================ */
.badge,
.tag,
.label {
  font-family: var(--font-ui);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-size: 10px;
  font-weight: 900;
  background: var(--sable);
  color: var(--argent);
  padding: 4px 8px;
  border-radius: 0;
}
.badge-secondary,
.badge-light {
  background: transparent;
  color: var(--ink-900);
  border: 1px solid var(--ink-300);
}
.badge-success,
.badge-rubric {
  background: var(--rubric);
  color: var(--argent);
}

/* ============================================================
   11. ALERTS — bordered notes, Cardo italic eyebrows
   ============================================================ */
.alert {
  border-radius: 0;
  border: 1px solid var(--ink-200);
  border-left-width: 3px;
  font-family: var(--font-body);
  font-size: var(--fs-small);
  padding: 16px 20px;
  background: var(--paper);
  color: var(--ink-900);
}
.alert-success {
  background: var(--paper);
  border-left-color: var(--ink-900);
}
.alert-info {
  background: var(--paper);
  border-left-color: var(--ink-900);
}
.alert-warning {
  background: var(--paper);
  border-left-color: var(--ink-900);
}
.alert-danger {
  background: var(--rubric-tint);
  border-left-color: var(--rubric);
  color: var(--ink-900);
}

/* ============================================================
   12. DECORATIVE — rules, blockquotes, modals
   ============================================================ */
hr,
.web-divider,
.rule {
  border: none;
  border-top: var(--rule-hairline);
  margin: var(--space-7) 0;
  background: none;
  height: 0;
}
.rule--double { border-top: var(--rule-double); }
.rule--heavy  { border-top: var(--rule-heavy); }

blockquote,
.blockquote,
.t-quote {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 22px;
  line-height: 1.35;
  color: var(--fg-strong);
  border-left: 2px solid var(--rule);
  padding: 4px 0 4px 24px;
  margin: var(--space-6) 0;
  max-width: var(--measure-display);
}

.modal-content {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 0;
  box-shadow: none;
}
.modal-header {
  border-bottom: 1px solid var(--rule);
  background: var(--sable);
  color: var(--argent);
  border-radius: 0;
}
.modal-header .modal-title {
  font-family: var(--font-ui);
  letter-spacing: 0.18em;
  font-size: 12px;
  text-transform: uppercase;
  font-weight: 900;
}
.modal-header .close,
.modal-header .btn-close {
  filter: invert(1);
}

/* Modal scrim — flat, no blur */
.modal-backdrop {
  background: rgba(11, 10, 8, 0.65);
  backdrop-filter: none;
}

/* ============================================================
   13. CODE BLOCKS
   ============================================================ */
code,
pre {
  font-family: var(--font-mono);
  font-size: 0.92em;
  letter-spacing: var(--tracking-mono);
}

code {
  background: var(--ink-50);
  color: var(--ink-900);
  padding: 2px 6px;
  border-radius: 0;
  border: 1px solid var(--ink-150);
}

pre {
  background: var(--sable);
  color: var(--argent);
  padding: 20px 24px;
  border-radius: 0;
  border-left: 3px solid var(--rubric);
  overflow-x: auto;
}
pre code {
  background: transparent;
  border: none;
  color: inherit;
  padding: 0;
}

/* ============================================================
   14. SCROLLBARS
   ============================================================ */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--ink-300);
  border-radius: 0;
}
::-webkit-scrollbar-thumb:hover { background: var(--ink-500); }

/* ============================================================
   15. SELECTION — rubric on argent (heraldic emphasis)
   ============================================================ */
::selection      { background: var(--rubric); color: var(--argent); }
::-moz-selection { background: var(--rubric); color: var(--argent); }

/* ============================================================
   16. RESPONSIVE
   ============================================================ */
@media (max-width: 768px) {
  body { font-size: var(--fs-small); }
  h1, .h1 { font-size: 32px; }
  h2, .h2 { font-size: 24px; }
  h3, .h3 { font-size: 20px; }
  .btn { padding: 12px 18px; font-size: 11px; }
  .for-login .page-card,
  .for-login .login-content { padding: 28px 20px; }
}

/* ============================================================
   17. FRAPPE LMS — token-based theming (Vue SPA at /lms)
   ------------------------------------------------------------
   frappe-ui's Tailwind utilities compile to CSS variables:
   `bg-surface-menu-bar` -> background-color: var(--surface-menu-bar)
   `text-ink-gray-9`    -> color: var(--ink-gray-9)
   `border-outline-gray-2` -> border-color: var(--outline-gray-2)

   We override the variables themselves on :root, which cascades
   through every component automatically — no !important needed,
   no fragile selector chains, immune to LMS upgrades that rename
   utility classes. This block replaces ~600 lines of per-utility
   overrides from earlier iterations.

   Token families (per frappe-ui tailwind/colors.json):
   - --ink-{white, gray-1..9, red-1..4, green-1..3, amber-1..3,
            blue-1..3, blue-link, cyan-1, pink-1, violet-1}
   - --surface-{white, gray-1..7, red-1..7, green-1..3, amber-1..3,
                blue-1..3, orange-1, violet-1, cyan-1, pink-1,
                menu-bar, cards, modal, selected}
   - --outline-{white, gray-1..5, red-1..3, green-1..2, amber-1..2,
                blue-1, orange-1, gray-modals}
   ============================================================ */

:root,
[data-theme="dark"] {
  /* ---------- ink (text) — flatten ramp to sable ---------- */
  --ink-white:      #FBFAF6;
  --ink-gray-1:     #8E867B;
  --ink-gray-2:     #6B6258;
  --ink-gray-3:     #4A443B;
  --ink-gray-4:     #2E2A24;
  --ink-gray-5:     #1C1A16;
  --ink-gray-6:     #0B0A08;
  --ink-gray-7:     #0B0A08;
  --ink-gray-8:     #0B0A08;
  --ink-gray-9:     #0B0A08;

  /* color tokens collapse to rubric — our only accent */
  --ink-blue-1:     #8A1B2B;
  --ink-blue-2:     #8A1B2B;
  --ink-blue-3:     #8A1B2B;
  --ink-blue-link:  #8A1B2B;
  --ink-red-1:      #5E0F1C;
  --ink-red-2:      #8A1B2B;
  --ink-red-3:      #8A1B2B;
  --ink-red-4:      #8A1B2B;
  --ink-cyan-1:     #8A1B2B;
  --ink-pink-1:     #8A1B2B;
  --ink-violet-1:   #8A1B2B;

  /* green/amber neutralized to muted ink (no green/amber in palette) */
  --ink-green-1:    #2E2A24;
  --ink-green-2:    #2E2A24;
  --ink-green-3:    #2E2A24;
  --ink-amber-1:    #2E2A24;
  --ink-amber-2:    #2E2A24;
  --ink-amber-3:    #2E2A24;

  /* ---------- surface (bg) — white/paper/vellum/sable ---------- */
  --surface-white:      #FFFFFF;
  --surface-gray-1:     #FBFAF6;
  --surface-gray-2:     #FBFAF6;
  --surface-gray-3:     #F2EDDF;
  --surface-gray-4:     #F2EDDF;
  --surface-gray-5:     #EFEBE1;
  --surface-gray-6:     #E6E2D8;
  --surface-gray-7:     #0B0A08;

  --surface-blue-1:     #0B0A08;
  --surface-blue-2:     #0B0A08;
  --surface-blue-3:     #0B0A08;

  --surface-red-1:      #F3E4E6;
  --surface-red-2:      #F3E4E6;
  --surface-red-3:      #F3E4E6;
  --surface-red-4:      #E5C5C9;
  --surface-red-5:      #C44456;
  --surface-red-6:      #8A1B2B;
  --surface-red-7:      #5E0F1C;

  --surface-green-1:    #F5F1E7;
  --surface-green-2:    #F5F1E7;
  --surface-green-3:    #F5F1E7;
  --surface-amber-1:    #F5F1E7;
  --surface-amber-2:    #F5F1E7;
  --surface-amber-3:    #F5F1E7;
  --surface-orange-1:   #F3E4E6;
  --surface-violet-1:   #F3E4E6;
  --surface-cyan-1:     #F2EDDF;
  --surface-pink-1:     #F3E4E6;

  --surface-menu-bar:   #0B0A08;   /* sable sidebar — see 17b */
  --surface-cards:      #FFFFFF;
  --surface-modal:      #FFFFFF;
  --surface-selected:   #F3E4E6;   /* rubric tint — active row */

  /* ---------- outline (border) — hairlines + sable for emphasis ---------- */
  --outline-white:      #FFFFFF;
  --outline-gray-1:     #D7D2C7;
  --outline-gray-2:     #D7D2C7;
  --outline-gray-3:     #B5AFA4;
  --outline-gray-4:     #0B0A08;
  --outline-gray-5:     #0B0A08;
  --outline-red-1:      #8A1B2B;
  --outline-red-2:      #8A1B2B;
  --outline-red-3:      #8A1B2B;
  --outline-green-1:    #0B0A08;
  --outline-green-2:    #0B0A08;
  --outline-amber-1:    #0B0A08;
  --outline-amber-2:    #0B0A08;
  --outline-blue-1:     #0B0A08;
  --outline-orange-1:   #8A1B2B;
  --outline-gray-modals: #D7D2C7;

  /* ---------- Base color palettes (used by frappe-ui Button) ----------
     frappe-ui's <Button theme="..."> uses base palette tokens like
     `bg-blue-500`, not the semantic `bg-surface-blue-*` family. Map
     the palettes so theme="blue"/"red"/"green" follow our system. */
  --blue-50:   #F5F1E7;
  --blue-100:  #EFEBE1;
  --blue-200:  #E6E2D8;
  --blue-300:  #D7D2C7;
  --blue-400:  #6B6258;
  --blue-500:  #0B0A08;   /* solid Button bg */
  --blue-600:  #0B0A08;
  --blue-700:  #2E2A24;   /* active state bg */
  --blue-800:  #1C1A16;
  --blue-900:  #0B0A08;
  --blue-950:  #0B0A08;

  --red-50:    #F3E4E6;
  --red-100:   #F3E4E6;
  --red-200:   #E5C5C9;
  --red-300:   #C44456;
  --red-400:   #8A1B2B;
  --red-500:   #8A1B2B;
  --red-600:   #8A1B2B;
  --red-700:   #5E0F1C;
  --red-800:   #5E0F1C;
  --red-900:   #5E0F1C;

  --green-50:  #F5F1E7;
  --green-100: #EFEBE1;
  --green-500: #0B0A08;
  --green-700: #0B0A08;

  --amber-50:  #F5F1E7;
  --amber-100: #EFEBE1;
  --amber-500: #4A443B;
  --amber-700: #2E2A24;

  --orange-50:  #F3E4E6;
  --orange-500: #8A1B2B;

  --pink-50:    #F3E4E6;
  --pink-500:   #8A1B2B;

  --violet-50:  #F3E4E6;
  --violet-500: #8A1B2B;

  --cyan-50:    #F2EDDF;
  --cyan-500:   #8A1B2B;
}

/* Force light color-scheme so OS-level dark prefs don't repaint inputs. */
[data-theme="dark"] {
  color-scheme: light;
}

/* ============================================================
   17a. LMS app shell — white surface, Cardo body, sable text
   ============================================================ */
#app,
#frappe-lms {
  background-color: #FFFFFF;
  color: #0B0A08;
  font-family: var(--font-body);
}

/* Body type families inside the SPA. frappe-ui doesn't set font-family
   at the utility-class level, so plain selectors win without !important. */
#app input,
#app button,
#app select,
#app textarea {
  font-family: var(--font-body);
}
#app h1, #app h2, #app h3, #app h4,
#app .text-2xl,
#app .text-xl,
#app .text-lg.font-semibold {
  font-family: var(--font-display);
  letter-spacing: var(--tracking-tight);
}

/* ============================================================
   17b. Sidebar — dark inverse plate (deliberate user-approved
   departure from the design-system's light-everywhere baseline)

   --surface-menu-bar is sable above. We re-bind the ink tokens
   *inside* the menu-bar subtree to argent so text-ink-gray-9
   inherits parchment rather than sable. :where(*) keeps
   specificity at 0 so utility classes still win where they should.
   ============================================================ */
.bg-surface-menu-bar,
.bg-surface-menu-bar :where(*) {
  --ink-gray-1: #B5AFA4;
  --ink-gray-2: #D7D2C7;
  --ink-gray-3: #EFEBE1;
  --ink-gray-4: #F2EDDF;
  --ink-gray-5: #FBFAF6;
  --ink-gray-6: #FBFAF6;
  --ink-gray-7: #FBFAF6;
  --ink-gray-8: #FBFAF6;
  --ink-gray-9: #FBFAF6;
  --surface-selected: #2E2A24;
  /* Hover state surfaces — frappe-ui uses --surface-gray-{1,2,3} for
     hover backgrounds. Re-bind them to warm darks so hover plates
     stay visible against the argent text we re-bound above. Without
     this, hover gives argent-on-argent (invisible). */
  --surface-gray-1: #2E2A24;
  --surface-gray-2: #2E2A24;
  --surface-gray-3: #1C1A16;
  --outline-gray-1: #2E2A24;
  --outline-gray-2: #2E2A24;
}
.bg-surface-menu-bar .bg-surface-selected {
  border-left: 3px solid #8A1B2B;
}

/* ============================================================
   17c. Minimal !important budget — non-token rules
   Color-related concerns collapse into the variable overrides
   above. The exceptions below are PHYSICAL properties (sizing,
   shape, shadow) that frappe-ui sets via utility classes rather
   than variables; we override those utilities directly.
   ============================================================ */

/* Hard corners — design system: max 3px. frappe-ui's rounded-md/lg/xl
   are 6/8/12px. Pin all rounded-* utilities to 0 inside the LMS. */
#app [class*="rounded-md"],
#app [class*="rounded-lg"],
#app [class*="rounded-xl"],
#app [class*="rounded-2xl"],
#app [class*="rounded-3xl"] {
  border-radius: 0 !important;
}
#app [class*="rounded-sm"] {
  border-radius: 2px !important;
}

/* No shadows — design system: zero shadow scale. */
#app [class*="shadow"] {
  box-shadow: none !important;
}

/* Sidebar nav items: frappe-ui sets a fixed h-7 (28px). Cardo at our
   size needs more vertical room; lift to auto height with explicit
   padding so hover doesn't change dimensions. */
#app .bg-surface-menu-bar .h-7 {
  height: auto !important;
  min-height: 2.4rem !important;
  padding: 10px 12px !important;
  border-radius: 0 !important;
  margin: 0 !important;
  transform: none !important;
}

/* Icon-button content fix — addresses the "invisible icon-bar" bug.
   When buttons get a dark bg via our --surface-* overrides, their
   SVG icons need to inherit the button's color rather than their
   own. Force currentColor on all SVG strokes/fills inside any button
   on a sable surface. */
#app button:has(svg) svg,
#app .bg-surface-menu-bar button svg,
#app [class*="bg-surface-blue"] svg,
#app [class*="bg-ink-gray-9"] svg,
#app [class*="bg-ink-gray-8"] svg,
#app [class*="bg-ink-gray-7"] svg {
  color: currentColor;
  stroke: currentColor;
}

/* Buttons on dark surfaces need argent text. The variable override
   handles direct text-ink-* descendants, but buttons whose default
   classes include explicit color rules need a backstop here. */
#app [class*="bg-surface-blue"],
#app [class*="bg-ink-gray-9"],
#app [class*="bg-ink-gray-8"],
#app [class*="bg-ink-gray-7"] {
  color: #FBFAF6;
}

/* ============================================================
   17d. Disable dark mode UI controls
   The design system is light-only. Tokens are already force-pinned
   to light values under [data-theme="dark"] above; this hides the
   toggle so users can't end up in a partially-broken state.
   ============================================================ */
#app button[title*="theme" i],
#app button[aria-label*="theme" i],
#app button[title*="dark" i],
#app button[aria-label*="dark" i],
#app button[title*="appearance" i],
#app button[aria-label*="appearance" i],
#app [class*="theme-toggle"],
#app [class*="ThemeToggle"],
#app button:has(svg.lucide-moon),
#app button:has(svg.lucide-sun),
#app button:has(svg.lucide-sun-moon),
#app button:has(svg.lucide-moon-star) {
  display: none !important;
}

/* ============================================================
   17e. Active link / nav indicator
   Rubric-crimson underline (matches LMS UI kit's .site-nav.is-active).
   Excluded inside the dark sidebar — that uses the rubric left
   rule on .bg-surface-selected (defined in 17b).
   ============================================================ */
#app a.router-link-active:not(.bg-surface-menu-bar *),
#app a.is-active:not(.bg-surface-menu-bar *) {
  color: #8A1B2B;
  border-bottom: 1px solid #8A1B2B;
}

/* ============================================================
   17f. Typography + treatment refinements
   ------------------------------------------------------------
   frappe-ui sets these concerns via utility classes rather than
   variables, so they can't ride on the token cascade. The targeted
   selectors below restore the chrome character of the design system
   (Lato 900 caps for nav, Cardo italic for accent text, sable plate
   for imageless course thumbnails) without going back to the
   utility-class-everywhere approach.
   ============================================================ */

/* -- Sidebar nav items: Lato 700 small-caps (matches portal navbar) -- */
#app .bg-surface-menu-bar .h-7 .text-sm,
#app .bg-surface-menu-bar .h-7 span {
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.10em;
  text-transform: uppercase;
}

/* -- Brand block at top of sidebar -- */
/* Chapter name: Lato 900 eyebrow (matches LMS UI kit's .brand-text .t1) */
#app .bg-surface-menu-bar > :first-child > :first-child .text-ink-gray-9 {
  font-family: var(--font-ui);
  font-weight: 900;
  font-size: 10px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  line-height: 1.3;
}
/* User name sub-line: italic Cardo (matches .brand-text .t2) */
#app .bg-surface-menu-bar > :first-child > :first-child .text-ink-gray-7 {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 13px;
  letter-spacing: 0;
  text-transform: none;
}

/* -- Course card imageless plate -- */
/* The LMS sets a per-card random gradient via inline style on
   `.bg-cover` when there's no course image. Inline styles beat
   normal CSS, so !important is required to win.
   Title text (.text-white inside the plate) gets argent via our
   --ink-white variable so it reads on the sable plate. */
#app .bg-surface-cards .bg-cover:has(.text-white) {
  background-image: none !important;
  background-color: #0B0A08 !important;
}
#app .bg-surface-cards .bg-cover .text-white {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* -- Course card body text -- */
/* Card titles below image area: Cardo bold (frappe-ui uses font-semibold) */
#app .bg-surface-cards .font-semibold {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.01em;
}
/* Card descriptions: plain Cardo body, bumped to readable 16px.
   `<p>` is the description paragraph; `.text-sm` catches the
   description div variant Frappe LMS uses on some cards. */
#app .bg-surface-cards p,
#app .bg-surface-cards .text-sm:not(button):not(button *):not(.font-semibold) {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: normal;
  text-transform: none;
}

/* -- Getting Started panel sits INSIDE .bg-surface-menu-bar -- */
/* The sidebar (17b) re-bound ink tokens to argent; the modal needs
   them back to sable since it's a vellum card with dark text.
   Specificity (0,3,0) beats the sidebar's (0,1,0) without !important. */
#app .bg-surface-menu-bar .bg-surface-modal,
#app .bg-surface-menu-bar .bg-surface-modal :where(*) {
  --ink-gray-1: #8E867B;
  --ink-gray-2: #6B6258;
  --ink-gray-3: #4A443B;
  --ink-gray-4: #2E2A24;
  --ink-gray-5: #1C1A16;
  --ink-gray-6: #0B0A08;
  --ink-gray-7: #0B0A08;
  --ink-gray-8: #0B0A08;
  --ink-gray-9: #0B0A08;
  --surface-modal: #F2EDDF;
  --outline-gray-1: #D7D2C7;
  --outline-gray-2: #D7D2C7;
}
/* Continue button INSIDE the panel — Lato chrome label */
#app .bg-surface-menu-bar .bg-surface-modal button {
  font-family: var(--font-ui);
  font-weight: 900;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

/* -- Course detail subtitle (CourseOverview.vue) --
   The .my-3.leading-6.text-ink-gray-7 class is unique to the
   course's short_introduction paragraph below the title. Bump
   to 18px so it reads as a proper sub-lead, not a caption. */
#app .my-3.leading-6.text-ink-gray-7 {
  font-size: 18px;
  line-height: 1.55;
}

/* -- Course detail tabs (frappe-ui Tabs component) --
   The TabsList puts data-state="active|inactive" on each tab
   <button>. Treat as Lato chrome (matches portal navbar). The
   rubric underline on active state is already handled by 17e. */
#app button[data-state="active"],
#app button[data-state="inactive"] {
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* -- LMS Settings page left nav (Settings.vue) --
   The Settings page reuses the SidebarLink component inside a
   .w-52.bg-surface-gray-2 wrapper. The existing main-sidebar rule
   (in this section above) doesn't cover it because it scopes
   under .bg-surface-menu-bar. Add a parallel rule for the
   Settings wrapper. */
#app .w-52.bg-surface-gray-2 .h-7 .text-sm,
#app .w-52.bg-surface-gray-2 .h-7 span {
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.10em;
  text-transform: uppercase;
}
/* Section group labels: "Settings", "Users", "Payment", "Conferencing",
   "Customize" — rendered with text-base.text-ink-gray-5 inside the
   same w-52 wrapper. */
#app .w-52.bg-surface-gray-2 .text-base.text-ink-gray-5 {
  font-family: var(--font-ui);
  font-weight: 900;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

/* -- Form helper text (frappe-ui InputDescription) --
   The descriptive text under toggles and inputs (e.g. "Make the
   course visible to all users.") renders with .text-p-sm on a
   <p data-slot="description">. Switch to Lato chrome per the
   "prose is Cardo, chrome is Lato" rule — helper text is chrome. */
#app .text-p-sm,
#app [data-slot="description"] {
  font-family: var(--font-ui);
  font-weight: 400;
  font-size: 13px;
  line-height: 1.55;
  letter-spacing: 0;
  text-transform: none;
}

/* -- Form inputs / textarea / select sizing --
   frappe-ui's inputs default to 14px (text-sm). Bump to 16px so
   form fields are comfortable to fill in (and to avoid iOS auto-
   zoom). User-entered text is prose-adjacent, so keep Cardo. */
#app input,
#app textarea,
#app select {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
}