/* ==========================================================================
   THEME ENGINE — maps the existing classes onto design tokens (docs/standards/THEMES.md).
   Load order: app · glass · components · soft · presets · theme-tokens (generated) · themes (this) · /brand.css
   Tokens: theme-tokens.css (per <html data-preset data-theme>). Defaults there reproduce the original soft look,
   so a rule here never changes 'soft' unless its tokens change. Prefix E = :is(:root, .brand-scope)[data-preset][data-theme]
   (0,3,0) so engine rules outrank soft.css (:root …) and the family rules in presets.css.
   ========================================================================== */

/* ---------- typography: Arabic + Latin pairing per style (system stacks + self-hosted Cairo only) ---------- */
body, .brand-scope, .theme-thumb { font-family: var(--f-lat); }
:is(html[lang="ar"], html[lang="fa"], html[lang="ur"]) :is(body, .brand-scope, .theme-thumb) { font-family: var(--f-ar); }
:root :is(.page-head h1, .section-title h2, .hero h2, .card h3, .kpi .val, .auth h1, .sheet-head h3, .brand-mono b, .empty b, .tt-h) { font-family: var(--fd-lat); }
:is(html[lang="ar"], html[lang="fa"], html[lang="ur"]) :is(.page-head h1, .section-title h2, .hero h2, .card h3, .kpi .val, .auth h1, .sheet-head h3, .brand-mono b, .empty b, .tt-h) { font-family: var(--fd-ar); }

:is(:root, .brand-scope)[data-preset][data-theme] body { font-size: calc(14px * var(--fs-k)); }
:is(:root, .brand-scope)[data-preset][data-theme] :is(.page-head h1, .page-head .row-between h1) {
  font-size: calc(clamp(20px, 6vw, 26px) * var(--fs-h)); font-weight: var(--fw-h); letter-spacing: var(--ls-h); text-transform: var(--tt-h); }
:is(:root, .brand-scope)[data-preset][data-theme] .section-title h2 { font-size: calc(16.5px * var(--fs-h)); font-weight: var(--fw-h2); letter-spacing: var(--ls-h); text-transform: var(--tt-h); }
:is(:root, .brand-scope)[data-preset][data-theme] :is(.kpi .val, .hero h2) { font-weight: var(--fw-h2); letter-spacing: var(--ls-h); }
:is(:root, .brand-scope)[data-preset][data-theme] .kpi .val { font-size: calc(20px * var(--fs-h)); }
:is(:root, .brand-scope)[data-preset][data-theme] .hero h2 { font-size: calc(21px * var(--fs-h)); }
:is(:root, .brand-scope)[data-preset][data-theme] .row .title { font-size: calc(14px * var(--fs-k)); }
:is(:root, .brand-scope)[data-preset][data-theme] .row .sub { font-size: calc(12px * var(--fs-k)); color: var(--label-2); }
:is(:root, .brand-scope)[data-preset][data-theme] .card h3 { font-size: calc(15px * var(--fs-h)); }

/* ---------- density + radius ---------- */
:is(:root, .brand-scope)[data-preset][data-theme] .btn {
  height: var(--btn-h); padding: 0 var(--btn-px); border-radius: var(--r-btn);
  font-size: calc(14px * var(--fs-k)); font-weight: var(--fw-btn); text-transform: var(--tt-btn); letter-spacing: var(--ls-btn); }
:is(:root, .brand-scope)[data-preset][data-theme] .btn.sm { height: calc(var(--btn-h) * .76); padding: 0 calc(var(--btn-px) * .7); font-size: calc(12.5px * var(--fs-k)); border-radius: calc(var(--r-btn) * .75); }
:is(:root, .brand-scope)[data-preset][data-theme] .row { min-height: var(--row-h); padding: var(--row-py) var(--row-px); }
:is(:root, .brand-scope)[data-preset][data-theme] .field { min-height: var(--row-h); }
:is(:root, .brand-scope)[data-preset][data-theme] .card { padding: var(--card-p); }
:is(:root, .brand-scope)[data-preset][data-theme] .kpi { padding: calc(var(--card-p) - 2px); }
:is(:root, .brand-scope)[data-preset][data-theme] .chip { border-radius: var(--r-chip); }

/* ---------- iconography: stroke weight + tile treatment ---------- */
:is(:root, .brand-scope)[data-preset][data-theme] .ic { stroke-width: var(--ic-sw); }
:is(:root, .brand-scope)[data-preset][data-theme] .tile { background: var(--tile-bg) !important; color: var(--tile-fg); box-shadow: var(--tile-shadow); border-radius: var(--r-tile); }
:is(:root, .brand-scope)[data-preset][data-theme] .tile b { color: var(--tile-fg); }
:is(:root, .brand-scope)[data-preset][data-theme] .empty .tile { color: var(--label-3); }

/* ---------- accent surfaces: hero, tab bar, fills carrying text ---------- */
:is(:root, .brand-scope)[data-preset][data-theme] .hero { background: var(--b-hero) !important; color: var(--hero-fg) !important; }
:is(:root, .brand-scope)[data-preset][data-theme] .hero :is(.eyebrow, p, b, .lbl) { color: var(--hero-fg); opacity: 1; }
:is(:root, .brand-scope)[data-preset][data-theme] .tabbar { background: var(--tabbar-bg) !important; }
:is(:root, .brand-scope)[data-preset][data-theme] .tab { color: var(--tab-fg); opacity: 1; }
:is(:root, .brand-scope)[data-preset][data-theme] .tab.on { color: var(--tab-on-fg); }
:is(:root, .brand-scope)[data-preset][data-theme] .tab-lens { background: var(--lens-bg); }
:is(:root, .brand-scope)[data-preset][data-theme] :is(.fab, .logo, .punch, .punch .lbl, .ai-orb, .ai-composer .send-btn) { color: var(--b-on); }
:is(:root, .brand-scope)[data-preset][data-theme] .ai-btn { color: var(--b-on) !important; }
:is(:root, .brand-scope)[data-preset][data-theme] :is(.punch.out, .punch.out .lbl) { color: #fff; }
:is(:root, .brand-scope)[data-preset][data-theme] .btn.white { background: var(--s-top); color: var(--tint); }

/* ---------- status colours (AA per style/mode: --green/--red/--blue/--warn are text-safe on cards) ---------- */
:is(:root, .brand-scope)[data-preset][data-theme] .badge.green { color: var(--green) !important; }
:is(:root, .brand-scope)[data-preset][data-theme] .badge.red { color: var(--red) !important; }
:is(:root, .brand-scope)[data-preset][data-theme] .badge.blue { color: var(--blue) !important; }
:is(:root, .brand-scope)[data-preset][data-theme] .badge.orange { color: var(--warn) !important; }
:is(:root, .brand-scope)[data-preset][data-theme] .badge.purple { color: var(--tint) !important; }
:is(:root, .brand-scope)[data-preset][data-theme] .delta { color: var(--green) !important; }
:is(:root, .brand-scope)[data-preset][data-theme] .btn.green { background: var(--ok-fill); color: #fff; }
:is(:root, .brand-scope)[data-preset][data-theme] .btn.red { background: var(--err-fill); color: #fff; }

/* ---------- controls: visible boundaries (WCAG 1.4.11) + focus (2.4.7 / 2.4.11) ---------- */
:is(:root, .brand-scope)[data-preset][data-theme] :is(.input-solo, .search input, .stepper) { box-shadow: var(--in2), inset 0 0 0 1px var(--ctl-line); }
:is(:root, .brand-scope)[data-preset][data-theme] .field textarea { box-shadow: inset 0 0 0 1px var(--ctl-line); border-radius: var(--r-sm); }
:is(:root, .brand-scope)[data-preset][data-theme] :is(.switch i, .pick .check) { box-shadow: var(--in1), inset 0 0 0 1px var(--ctl-line); }
:is(:root, .brand-scope)[data-preset][data-theme] :is(input[type="checkbox"], input[type="radio"], input[type="range"], progress) { accent-color: var(--b-tint); }
:is(:root, .brand-scope)[data-preset][data-theme] ::placeholder { color: var(--label-2); opacity: 1; }
:is(:root, .brand-scope)[data-preset][data-theme] :focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
:is(:root, .brand-scope)[data-preset][data-theme] :is(.input-solo, .search input):focus-visible { outline-offset: 0; }

/* ---------- motion: per-style tempo, ambient loops, reduced motion ---------- */
:is(:root, .brand-scope)[data-preset][data-theme] :is(a.row, button.row, label.row, a.kpi, .chip, .tile, .btn, .tab, .lb-card) { transition-duration: var(--dur); }
:is(:root, .brand-scope)[data-preset][data-theme] :is(.list > .row, .kpis > *, .springboard > *, .lb-grid > *, .acts > *, .gap-12 > *, .hscroll > *) { animation-duration: var(--enter); }
:is(:root, .brand-scope)[data-preset][data-theme] :is(.fab, .ai-orb, .ai-btn, .auth .logo, .guest-card .logo) { animation-play-state: var(--ambient); }
:is(:root, .brand-scope)[data-preset][data-theme] .btn::after,
:is(:root, .brand-scope)[data-preset][data-theme] .hero::before,
:is(:root, .brand-scope)[data-preset][data-theme] .hero::after,
:is(:root, .brand-scope)[data-preset][data-theme] :is(.punch-wrap, .ai-head)::before { animation-play-state: var(--ambient); }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* ==========================================================================
   STYLE-SCOPED CSS (small: everything else is tokens). S(x) = :is(:root, .brand-scope)[data-preset="x"]
   ========================================================================== */
/* crisp — native grouped lists, translucent bar, no lens */
:is(:root, .brand-scope)[data-preset="crisp"] .tab-lens { display: none; }
:is(:root, .brand-scope)[data-preset="crisp"] .tabbar { -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); box-shadow: 0 -.5px 0 var(--sep) !important; }
:is(:root, .brand-scope)[data-preset="crisp"] .row + .row::before { border-top-width: .5px; }
:is(:root, .brand-scope)[data-preset="crisp"] .group-label { text-transform: uppercase; letter-spacing: .02em; color: var(--label-2); }

/* tonal — pill indicator behind the active icon only */
:is(:root, .brand-scope)[data-preset="tonal"] .tab-lens { top: 9px; bottom: auto; height: 30px; border-radius: 16px; }
:is(:root, .brand-scope)[data-preset="tonal"] .chip.on { background: var(--tile-bg); color: var(--tile-fg); box-shadow: none; }

/* acrylic — reveal-style hover, thin bottom accent on the active nav item */
@media (hover: hover) { :is(:root, .brand-scope)[data-preset="acrylic"] :is(a.row, .chip, .tools a):hover { background: var(--fill-2); } }
:is(:root, .brand-scope)[data-preset="acrylic"] .tab-lens { top: auto; bottom: 6px; height: 3px; border-radius: 2px; }
:is(:root, .brand-scope)[data-preset="acrylic"] .tab.on { color: var(--tint); }
:is(:root, .brand-scope)[data-preset="acrylic"] body::before { opacity: .35 !important; }

/* nordic — airy hairlines, no gradients */
:is(:root, .brand-scope)[data-preset="nordic"] .page-head h1 { font-weight: 600; }
:is(:root, .brand-scope)[data-preset="nordic"] .group-label { letter-spacing: .08em; text-transform: uppercase; }

/* luxury — gold rules, serif headlines, slow fades */
:is(:root, .brand-scope)[data-preset="luxury"] .section-title h2::after { content: ""; display: block; width: 32px; height: 1px; margin-top: 6px; background: var(--lux-gold); }
:is(:root, .brand-scope)[data-preset="luxury"] .hero { box-shadow: inset 0 0 0 1px var(--lux-gold) !important; }
:is(:root, .brand-scope)[data-preset="luxury"] .tabbar { box-shadow: inset 0 1px 0 var(--lux-gold), 0 14px 30px -18px rgba(0, 0, 0, .6) !important; }
:is(:root, .brand-scope)[data-preset="luxury"] .tile { color: var(--lux-gold); }
:is(:root, .brand-scope)[data-preset="luxury"] .group-label { letter-spacing: .16em; text-transform: uppercase; }

/* tropical — sun + lagoon glow behind the page */
:is(:root, .brand-scope)[data-preset="tropical"] body::before { background: radial-gradient(60vmax 40vmax at 100% -10%, rgba(255, 196, 92, .22), transparent 60%), radial-gradient(60vmax 50vmax at -10% 110%, rgba(24, 170, 160, .16), transparent 60%) !important; }
:is(:root, .brand-scope)[data-preset="tropical"] .hero::before { background: radial-gradient(circle, rgba(255, 255, 255, .22) 0 30%, transparent 31%); width: 160px; height: 160px; top: -40px; inset-inline-start: -30px; }

/* aegean — arched cards, faint tile pattern */
:is(:root, .brand-scope)[data-preset="aegean"] body::before { opacity: .5 !important;
  background: repeating-conic-gradient(from 45deg, rgba(var(--b-glow-l), .06) 0 25%, transparent 0 50%) 0 0 / 28px 28px !important; }
:is(:root, .brand-scope)[data-preset="aegean"] .hero { border-radius: var(--r-xl) var(--r-xl) var(--r) var(--r); }

/* sahara — dunes along the bottom */
:is(:root, .brand-scope)[data-preset="sahara"] body::before { opacity: 1 !important;
  background: radial-gradient(120vmax 30vmax at 20% 112%, rgba(196, 140, 70, .16), transparent 60%), radial-gradient(110vmax 28vmax at 90% 118%, rgba(160, 100, 40, .12), transparent 60%) !important; }

/* redsea — wave under the hero */
:is(:root, .brand-scope)[data-preset="redsea"] .hero::after { background: radial-gradient(120% 60% at 50% 120%, rgba(255, 255, 255, .18), transparent 60%); animation: none; }

/* enterprise — tables tighter, square everything */
:is(:root, .brand-scope)[data-preset="enterprise"] :is(table td, table th) { padding-block: 5px; }
:is(:root, .brand-scope)[data-preset="enterprise"] .tab-lens { border-radius: 4px; }

/* kids — wobble on press, colourful tiles (dark glyph on pastel = AA) */
:is(:root, .brand-scope)[data-preset="kids"] :is(.btn, .chip, .tile):active { transform: scale(.94) rotate(-2deg); }
:is(:root, .brand-scope)[data-preset="kids"][data-theme="light"] :is(.list, .tools, .springboard) > :nth-child(4n+2) .tile { --tile-bg: #ffe3ec; --tile-fg: #8a1846; }
:is(:root, .brand-scope)[data-preset="kids"][data-theme="light"] :is(.list, .tools, .springboard) > :nth-child(4n+3) .tile { --tile-bg: #dff3ff; --tile-fg: #0d4f7a; }
:is(:root, .brand-scope)[data-preset="kids"][data-theme="light"] :is(.list, .tools, .springboard) > :nth-child(4n) .tile { --tile-bg: #e6f9dd; --tile-fg: #2c6216; }

/* neon — glow on headings and the active accents */
:is(:root, .brand-scope)[data-preset="neon"][data-theme="dark"] :is(.page-head h1, .hero h2) { text-shadow: 0 0 14px rgba(var(--b-tint-rgb), .55); }
:is(:root, .brand-scope)[data-preset="neon"] .tab-lens, :is(:root, .brand-scope)[data-preset="neon"] .chip.on { box-shadow: var(--o-glow); }
:is(:root, .brand-scope)[data-preset="neon"][data-theme="dark"] body::before { opacity: .9 !important; }

/* pastel — no gloss */
:is(:root, .brand-scope)[data-preset="pastel"] .btn::after { display: none; }

/* contrast (AAA) — underlined links, solid borders, no transparency or blur */
:is(:root, .brand-scope)[data-preset="contrast"] :is(.caption a, .section-title a, p a, .link-btn, .muted a) { text-decoration: underline; text-underline-offset: 3px; }
:is(:root, .brand-scope)[data-preset="contrast"] * { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; text-shadow: none !important; }
:is(:root, .brand-scope)[data-preset="contrast"] body::before, :is(:root, .brand-scope)[data-preset="contrast"] body::after { display: none !important; }
:is(:root, .brand-scope)[data-preset="contrast"] :focus-visible { outline-width: 3px; }
:is(:root, .brand-scope)[data-preset="contrast"] .tabbar { box-shadow: 0 0 0 2px var(--label) !important; }

/* editorial — rules instead of boxes, kicker labels */
:is(:root, .brand-scope)[data-preset="editorial"] .group-label { letter-spacing: .14em; text-transform: uppercase; color: var(--tint); }
:is(:root, .brand-scope)[data-preset="editorial"] .section-title { border-bottom: 1px solid var(--label); padding-bottom: 4px; }
:is(:root, .brand-scope)[data-preset="editorial"] :is(.caption a, p a) { text-decoration: underline; }

/* arcade — pixel corners, stepped motion, square line caps */
:is(:root, .brand-scope)[data-preset="arcade"] .ic { stroke-linecap: square; stroke-linejoin: miter; }
:is(:root, .brand-scope)[data-preset="arcade"] :is(.btn, .chip, .tab, .tile, a.row) { transition-timing-function: steps(3); }
:is(:root, .brand-scope)[data-preset="arcade"][data-theme="dark"] body::after { display: block; opacity: 1; background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .18) 0 1px, transparent 1px 3px); z-index: -1; }

/* ==========================================================================
   STYLE PICKER (/settings/brand, /me) — thumbnails are drawn with each style's own tokens:
   <span class="theme-thumb" data-preset="x" data-theme="light|dark"> … </span>
   ========================================================================== */
.theme-moods { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 10px; }
.theme-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.theme-opt { position: relative; display: block; margin: 0; padding: 7px; cursor: pointer; border-radius: 16px; background: var(--fill); box-shadow: inset 0 0 0 1px var(--sep); }
.theme-opt[hidden] { display: none; }
.theme-opt:has(input:checked) { box-shadow: inset 0 0 0 2px var(--tint); background: var(--tint-soft); }
.theme-opt:has(input:focus-visible) { outline: 2px solid var(--focus, var(--tint)); outline-offset: 2px; }
.theme-opt input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.theme-opt .to-name { display: flex; align-items: center; gap: 6px; margin-top: 7px; font-weight: 750; font-size: 13px; color: var(--label); }
.theme-opt .to-name .ic { color: var(--tint); }
.theme-opt .to-desc { display: block; margin-top: 2px; font-size: 11.5px; line-height: 1.4; color: var(--label-2); }
.theme-opt .to-tags { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 5px; }
.theme-opt .to-tags i { font-style: normal; font-size: 10.5px; font-weight: 700; padding: 1px 7px; border-radius: 99px; background: var(--fill-2); color: var(--label-2); }

.theme-thumb { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; gap: 6px; height: 112px; padding: 9px;
  border-radius: 12px; background: var(--bg); color: var(--label); font-size: calc(11px * var(--fs-k, 1)); line-height: 1.25; text-align: start; }
.theme-thumb::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(70% 60% at 100% 0%, rgba(var(--blob-rgb, var(--b-tint-rgb)), .45), transparent 65%); opacity: 0; }
.theme-thumb:is([data-preset="glass"], [data-preset="acrylic"], [data-preset="redsea"], [data-preset="neon"])::before { opacity: 1; }
.theme-thumb .tt-card { display: flex; align-items: center; gap: 7px; padding: 7px; border-radius: var(--r, 12px); background: var(--surface); box-shadow: var(--e2), var(--edge); }
.theme-thumb:is([data-preset="glass"], [data-preset="acrylic"], [data-preset="redsea"], [data-preset="neon"]) .tt-card { background: var(--g-fill); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.theme-thumb .tt-tile { flex: none; display: grid; place-items: center; width: 22px; height: 22px; border-radius: var(--r-tile); background: var(--tile-bg); color: var(--tile-fg); box-shadow: var(--tile-shadow); }
.theme-thumb .tt-tile .ic { width: 13px; height: 13px; stroke-width: var(--ic-sw); }
.theme-thumb .tt-txt { min-width: 0; display: grid; }
.theme-thumb .tt-h { font-weight: var(--fw-h2); letter-spacing: var(--ls-h); text-transform: var(--tt-h); font-size: calc(12.5px * var(--fs-h, 1)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.theme-thumb .tt-s { color: var(--label-2); font-size: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.theme-thumb .tt-a { color: var(--tint); font-weight: 750; }
.theme-thumb .tt-row { display: flex; gap: 5px; align-items: center; }
.theme-thumb .tt-btn { display: inline-grid; place-items: center; height: 20px; padding: 0 10px; border-radius: var(--r-btn); background: var(--orange); color: var(--b-on);
  box-shadow: var(--o-glow), var(--gloss); font-weight: var(--fw-btn); font-size: 10px; text-transform: var(--tt-btn); letter-spacing: var(--ls-btn); }
.theme-thumb .tt-chip { display: inline-grid; place-items: center; height: 20px; padding: 0 8px; border-radius: var(--r-chip); background: var(--surface); color: var(--label-2); box-shadow: var(--e1), var(--edge); font-size: 10px; }
.theme-thumb .tt-bar { margin-top: auto; display: grid; grid-auto-flow: column; align-items: center; height: 18px; padding: 3px; border-radius: 10px; background: var(--tabbar-bg); box-shadow: var(--e2), var(--edge); }
.theme-thumb .tt-bar i { justify-self: center; width: 7px; height: 7px; border-radius: 50%; background: var(--tab-fg); opacity: .7; }
.theme-thumb .tt-bar i:first-child { width: 100%; height: 12px; border-radius: 6px; background: var(--lens-bg); opacity: 1; }
.theme-thumb[data-preset="crisp"] .tt-bar i:first-child { background: var(--tint); width: 7px; height: 7px; }

.theme-mode-toggle { margin-inline-start: auto; }

/* ---------- hooks for other views: set tile tokens on the element instead of fighting the engine ---------- */
/* e.g. guest portal hero tiles (visit/home.php .tile.glass-tile) stay translucent in every style */
:is(:root, .brand-scope)[data-preset][data-theme] .tile.glass-tile { --tile-bg: rgba(255, 255, 255, .22); --tile-fg: currentColor; --tile-shadow: inset 0 1px 0 rgba(255, 255, 255, .4); }