/* ============================================================================
   BAJ OS — Accessibility & Typography Layer (WCAG AA)        v1.0.0
   Designed & Developed by: Babatunde Adedeji Adelaja · 2026
   ----------------------------------------------------------------------------
   PRESENTATION ONLY. No markup, business logic, workflow, database, KGE logic,
   alerts or calculations are changed. This file centralises typography and
   colour into reusable design tokens and raises every weak/low-contrast text
   value to a sunlight-readable, WCAG-AA standard.

   It is loaded LAST so it wins the cascade — new pages inherit accessible
   defaults automatically by using the --txt* / status tokens below.
   Target: the BAJ emerald/gold dark theme (the live app theme).
   ============================================================================ */

/* ---------- 1. REUSABLE DESIGN TOKENS (use these on all new UI) ---------- */
:root{
  /* TEXT — measured on the emerald surfaces (--p #073b29 / --p2 #0a4631) */
  --txt:        #f7f4ea;   /* primary body text     ~14:1  */
  --txt-strong: #ffffff;   /* headings / emphasis          */
  --txt-muted:  #cbe2d4;   /* secondary / labels    ~8.5:1 */
  --txt-faint:  #aecbbb;   /* tertiary / meta       ~5.2:1 (AA) */
  --placeholder:#b9d3c6;   /* input placeholders    ~6:1   */

  /* STATUS — all AA on dark, distinct hues for colour-blind separation */
  --ok:   #7fe3ab;   --ok-bg:  rgba(46,158,69,.16);
  --warn: #ffd07a;   --warn-bg:rgba(224,169,74,.16);
  --err:  #ff968b;   --err-bg: rgba(185,28,28,.18);
  --info: #a6c8ff;   --info-bg:rgba(40,90,140,.18);

  /* INTERACTION */
  --focus:        #e7b85a;
  --disabled-txt: #d4e4db;  /* disabled stays legible, not invisible */

  /* ---- harden the app's OWN muted token (263 uses) to AA ---- */
  --soft: #cbe2d4;          /* was sage #9fc4b0 — brighter for outdoor sun */
}

/* ---------- 2. BASE LEGIBILITY ---------- */
body{ text-rendering:optimizeLegibility; -webkit-font-smoothing:antialiased; }

/* Placeholders are never washed out (covers the faint .4 alpha ones) */
::placeholder{ color:var(--placeholder)!important; opacity:1!important; }
.tag-search-bar input::placeholder,
.compat-iw input::placeholder,
.gme-search input::placeholder,
.lsearch input::placeholder{ color:rgba(244,237,224,.80)!important; opacity:1!important; }

/* ---------- 3. FORM CONTROLS ---------- */
/* Disabled controls: distinguishable but readable (no faint ghost text) */
input:disabled,select:disabled,textarea:disabled,
button:disabled{ opacity:1!important; }
input:disabled,select:disabled,textarea:disabled{
  color:var(--disabled-txt)!important; -webkit-text-fill-color:var(--disabled-txt)!important;
}

/* Required-field marker (opt-in, consistent) */
label.required::after,.req-mark::after{ content:" *"; color:var(--err); font-weight:800; }

/* ---------- 4. FOCUS & HOVER (keyboard + touch visible) ---------- */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,
textarea:focus-visible,[tabindex]:focus-visible,.ap-card:focus-visible,.ibtn:focus-visible{
  outline:3px solid var(--focus)!important; outline-offset:2px!important; border-radius:8px;
}

/* ---------- 5. STATUS / MESSAGE HELPERS (reusable) ---------- */
.txt-ok{color:var(--ok)!important}    .bg-ok{background:var(--ok-bg)!important}
.txt-warn{color:var(--warn)!important} .bg-warn{background:var(--warn-bg)!important}
.txt-err{color:var(--err)!important}   .bg-err{background:var(--err-bg)!important}
.txt-info{color:var(--info)!important} .bg-info{background:var(--info-bg)!important}

/* ---------- 6. MOBILE / OUTDOOR FLOORS ---------- */
/* Stop the tiniest meta text shrinking below readable on phones */
@media(max-width:680px){
  .ap-d,.gme-an-meta,.gme-line-meta,.ra-kpi-l,.ra-kpi-t,.gme-exp,.sub-info,
  .citem .sub-info,.ra-foot,.ra-note{ font-size:12px!important; }
  /* comfortable tap targets */
  .ibtn,.ap-card,button{ min-height:40px; }
}

/* ============================================================================
   7. SURFACE-AWARE TYPOGRAPHY  — the real theme-level fix
   ----------------------------------------------------------------------------
   ROOT CAUSE: the dark theme sets, GLOBALLY with !important:
     input,select,textarea { color:var(--ink); background:rgba(255,255,255,.04) }
     label                 { color:#cfe0d5 / var(--soft) }
     ::placeholder         { faint sage }
   These assume a DARK background, so any modal/card rendered on WHITE or CREAM
   inherits near-invisible text (ivory-on-white ≈ 1.1:1), and inline colours
   lose to the !important globals.

   FIX (systemic, not per-page): any element whose own inline style declares a
   light background — background:#fff…  — is, by definition, a LIGHT SURFACE.
   We re-assert the correct dark-on-light typography for its form text. Because
   "[style*='background:#fff'] label" (0,1,1) is MORE specific than the global
   "label" (0,0,1), it wins the cascade even against !important. This auto-fixes
   every current AND future light modal/card without per-component overrides.
   The reusable ".baj-light" class does the same for components that set their
   background via a class instead of inline.
   ============================================================================ */

/* --- light-surface tokens --- */
:root{
  --on-light-txt:   #173d2a;   /* primary text on white  12:1  */
  --on-light-ink:   #2b2118;   /* primary text on cream  14:1  */
  --on-light-muted: #46544c;   /* helper text            8:1   */
  --on-light-ph:    #5b6b62;   /* placeholder            5.6:1 */
  --on-light-line:  #b6c4bd;   /* field border          */
}

/* --- A. auto-scope: any element with an inline white background --- */
[style*="background:#fff"] label,
[style*="background:#fff"] .lbl,
[style*="background:#fff"] legend{ color:var(--on-light-txt)!important; }

[style*="background:#fff"] input,
[style*="background:#fff"] select,
[style*="background:#fff"] textarea,
input[style*="background:#fff"],
select[style*="background:#fff"],
textarea[style*="background:#fff"]{
  color:var(--on-light-txt)!important; -webkit-text-fill-color:var(--on-light-txt)!important;
  background:#fff!important; border:1px solid var(--on-light-line)!important; border-radius:8px!important;
}
[style*="background:#fff"] input::placeholder,
[style*="background:#fff"] textarea::placeholder,
input[style*="background:#fff"]::placeholder,
textarea[style*="background:#fff"]::placeholder{
  color:var(--on-light-ph)!important; -webkit-text-fill-color:var(--on-light-ph)!important; opacity:1!important;
}
[style*="background:#fff"] select option{ color:var(--on-light-txt); background:#fff; }
[style*="background:#fff"] .hint,[style*="background:#fff"] .sub,
[style*="background:#fff"] small,[style*="background:#fff"] .muted,
[style*="background:#fff"] .help{ color:var(--on-light-muted)!important; }
[style*="background:#fff"] input:disabled,
[style*="background:#fff"] select:disabled,
[style*="background:#fff"] textarea:disabled{
  color:var(--on-light-ph)!important; -webkit-text-fill-color:var(--on-light-ph)!important;
  background:#f1f4f2!important;
}

/* --- B. reusable explicit scope for class-based light components --- */
.baj-light label,.baj-light .lbl{ color:var(--on-light-txt)!important; }
.baj-light input,.baj-light select,.baj-light textarea{
  color:var(--on-light-txt)!important; -webkit-text-fill-color:var(--on-light-txt)!important;
  background:#fff!important; border:1px solid var(--on-light-line)!important;
}
.baj-light input::placeholder,.baj-light textarea::placeholder{
  color:var(--on-light-ph)!important; -webkit-text-fill-color:var(--on-light-ph)!important; opacity:1!important;
}
.baj-light select option{ color:var(--on-light-txt); background:#fff; }
.baj-light .hint,.baj-light small,.baj-light .sub,.baj-light .muted{ color:var(--on-light-muted)!important; }
.baj-light input:disabled,.baj-light select:disabled,.baj-light textarea:disabled{
  color:var(--on-light-ph)!important; -webkit-text-fill-color:var(--on-light-ph)!important; background:#f1f4f2!important;
}

/* --- C. APP FORM CONTROLS — standardized: dark glass + LIGHT text ----------
   ROOT CAUSE of the dark-on-dark form regression: the app's dark theme renders
   form fields as dark "glass", but a legacy rule (.mf input{background:#fbf7ec})
   set a CREAM background on SOME builds without a matching text colour. Guessing
   "cream" per-class was wrong — in the live build these inputs are DARK, so an
   earlier dark-text override made the values invisible.
   FIX: stop guessing. STANDARDISE every app form control to ONE surface —
   dark glass + ivory text + a readable, dimmer placeholder. The genuinely-light
   contexts (.tool-card, .baj-light, inline background:#fff) are MORE specific
   and keep their dark-on-light treatment from sections A/B above. */
.mf input,.mf select,.mf textarea,
.ff input,.ff select,.ff textarea{
  background:rgba(255,255,255,.06)!important;
  color:var(--ink)!important; -webkit-text-fill-color:var(--ink)!important;
  border:1px solid var(--ln)!important;
}
.mf input::placeholder,.mf textarea::placeholder,
.ff input::placeholder,.ff textarea::placeholder{
  color:var(--txt-faint)!important; -webkit-text-fill-color:var(--txt-faint)!important; opacity:1!important;
}
.mf select option,.ff select option{ background:#0a4631; color:var(--ink); }

/* --- D. MODAL HEADER — one consistent on-brand title typography ------------
   The gold header bar (.mhd background:var(--fo)) had its title forced to #000
   by a legacy injected rule. Standardise every modal title to BAJ deep emerald
   on gold (5.8:1, AA) for consistent, premium modal typography. */
.mhd h2{ color:#063d2a!important; font-weight:800!important; }
.mhd .mcl{ color:#063d2a!important; opacity:.85!important; }
.mhd .mcl:hover{ opacity:1!important; }

/* --- E. INFO WASH CARDS — fix tokens that are dark-on-dark in the dark theme -
   Components such as .pm-header use color:var(--fod) (near-black) on a gold-tint
   wash: correct in the light theme, invisible on the dark app. Re-assert a
   light, on-brand foreground so they inherit the right colour. */
.pm-header,.stag,.rc-chip.sow-c,.rc-lifetime,
[style*="background:var(--fol)"],[style*="color:var(--fod)"]{
  color:#EAF2EC!important; -webkit-text-fill-color:#EAF2EC!important;
}
.pm-header strong,[style*="background:var(--fol)"] strong,
[style*="background:var(--fol)"] b{ color:#E6C063!important; -webkit-text-fill-color:#E6C063!important; }
/* (certificate/print contexts .becon/.addr-box keep --fod dark text — they
   render on white paper, so they are intentionally dark-on-light.) */