/* tafaddal brand layer — loaded last on every page so it sets the colours and fonts for the whole site.
   Palette: maroon #8A1538 (action, brand), cream #F7F1E8 (ground), gold #9E7E45/#B8975A (small accents only, under 5%), ink #2A2326 (text).
   Fonts: Lexend for English, Almarai for Arabic. */
:root{
  --brand-maroon:#8A1538; --brand-gold:#9E7E45; --brand-gold-light:#B8975A;
  --display:'Lexend','Almarai',system-ui,-apple-system,'Segoe UI',sans-serif;
  --sans:'Lexend','Almarai',system-ui,-apple-system,'Segoe UI',sans-serif;
  --bg:#F7F1E8; --surface:#FFFDF9; --ink:#2A2326; --ink2:#4A3F43; --muted:#6B5F63; --line:#E4D9C9; --edge:#CBBDAA;
  --accent:#8A1538; --accent-ink:#FFFFFF; --accent-text:#8A1538; --logo-m:#8A1538; --logo-g:#B8975A; --tint:#F1E4E3; --fill:#EFE6D8; --fill2:#E6DACA;
  --good:#1F7A45; --good-tint:#E3F1E6; --warn:#8A5A00; --warn-tint:#FBEFD9; --info:#7A4A12; --info-tint:#F5EAD8; --bad:#A3122B;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --brand-maroon:#8A1538; --brand-gold:#D4B97A; --brand-gold-light:#D4B97A; --logo-m:#F3ECE6; --logo-g:#D4B97A; --accent-text:#D4B97A;
    --bg:#2A2326; --surface:#342B2F; --ink:#F7F1E8; --ink2:#E4DAD3; --muted:#C2B5B0; --line:#4D4145; --edge:#85757A;
    --accent:#8A1538; --accent-ink:#F7F1E8; --tint:#4A2533; --fill:#3A3034; --fill2:#4D4145;
    --good:#5CC88A; --good-tint:#16301F; --warn:#E3B04B; --warn-tint:#33280F; --info:#D9B27A; --info-tint:#2E2416; --bad:#FF8A95;
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --brand-maroon:#8A1538; --brand-gold:#D4B97A; --brand-gold-light:#D4B97A; --logo-m:#F3ECE6; --logo-g:#D4B97A; --accent-text:#D4B97A;
  --bg:#2A2326; --surface:#342B2F; --ink:#F7F1E8; --ink2:#E4DAD3; --muted:#C2B5B0; --line:#4D4145; --edge:#85757A;
  --accent:#8A1538; --accent-ink:#F7F1E8; --tint:#4A2533; --fill:#3A3034; --fill2:#4D4145;
  --good:#5CC88A; --good-tint:#16301F; --warn:#E3B04B; --warn-tint:#33280F; --info:#D9B27A; --info-tint:#2E2416; --bad:#FF8A95;
  color-scheme:dark;
}
body{background:var(--bg);color:var(--ink);font-family:var(--sans);font-weight:400;letter-spacing:0}
html[lang="ar"] body,html[lang="ar"]{--display:'Almarai','Lexend',system-ui,sans-serif;--sans:'Almarai','Lexend',system-ui,sans-serif}
h1,h2,h3{font-family:var(--display);letter-spacing:-.015em}
h1{font-weight:600}
html[lang="ar"] h1,html[lang="ar"] h2{font-weight:800;letter-spacing:0}
:lang(ar){font-family:'Almarai','Lexend',sans-serif}

/* the logo at the top of each page */
.tf-logo{display:block;width:176px;max-width:60vw;height:auto;margin:0 0 16px}
.tf-logo .m{fill:var(--logo-m)}.tf-logo .g{fill:var(--logo-g);stroke:var(--logo-g);stroke-width:.8}

/* actions in brand maroon */
.btn.p{background:var(--accent)!important;color:var(--accent-ink)!important}
.btn.p:hover{opacity:.9}
:focus-visible{outline-color:var(--accent)!important}
input:focus,select:focus,textarea:focus{border-color:var(--accent)!important}

/* order form: chosen options, steps and totals */
.chip input:checked+span,.tier input:checked+span{background:var(--accent)!important;color:var(--accent-ink)!important}
.st[aria-current="step"]{color:var(--accent-text)!important;border-bottom-color:var(--accent-text)!important}
input[type=checkbox]:checked{background:var(--accent);border-color:var(--accent)}
.lg[aria-pressed="true"]{color:var(--accent-text)}
.acct{color:var(--accent-text)}
.tot .big{color:var(--accent-text)}
tr.tot td{color:var(--accent-text)}
.bar{border-bottom-color:var(--line)}
/* the occasion colour wash stays, softer so cream reads as the ground */
:root{--oa:.38}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--oa:.22}}
:root[data-theme="dark"]{--oa:.22}

/* My orders and staff: status pills and cards on cream */
.ord,.card,.files li{background:var(--surface)}
.pill{background:var(--fill)}
.st-design{background:var(--info-tint);color:var(--info)}
.home{color:var(--accent-text)}

/* links in brand maroon */
a{color:var(--accent-text)}
a.btn.s,a.btn.q{color:var(--ink)}