/* Path 3 bridge: puts existing pages (theme.css + inline var() styles) onto the
 * AtrbCode design system without rewriting each template. Loaded after
 * theme.css and atrb-ds.css, only when the design_v3 flag is on.
 * The old variable names are mapped onto design-system tokens, so every inline
 * style written as var(--accent) etc. follows the dark and light themes.
 */
:root {
  --bg: var(--ds-bg);
  --surface: var(--ds-surface);
  --text: var(--ds-text);
  --dim: var(--ds-muted);
  --border: var(--ds-line);
  --accent: #b48ae6;            /* readable purple on dark (AA for text) */
  --accent-hover: #c9a6f2;
  --accent-light: rgba(180,138,230,.13);
  --gold: var(--ds-gold-fill);   /* old pages use --gold mostly as a fill */
  --gold-hover: #ffcb2e;
  --gold-soft: rgba(255,192,0,.10);
  --green: var(--ds-ok);
  --green-soft: rgba(61,220,151,.12);
  --danger: var(--ds-bad);
  --danger-soft: rgba(255,107,129,.12);
  --radius: 12px;
}
:root[data-theme="light"] {
  --accent: #5d3272;
  --accent-hover: #4a2860;
  --accent-light: rgba(93,50,114,.07);
  --gold-soft: rgba(255,192,0,.16);
  --green-soft: rgba(29,138,87,.12);
  --danger-soft: rgba(192,52,75,.10);
}

html.ds-bridge body { background: var(--ds-bg); color: var(--ds-text); font-family: var(--ds-font); -webkit-font-smoothing: antialiased; }
html.ds-bridge body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(900px 500px at 85% -10%, rgba(155,107,211,.16), transparent 60%),
              radial-gradient(700px 420px at -10% 10%, rgba(255,192,0,.07), transparent 60%); }
:root[data-theme="light"].ds-bridge body::before { opacity: .5; }
html.ds-bridge h1, html.ds-bridge h2, html.ds-bridge h3 { color: var(--ds-text); }
/* plain content links only; classed links (nav, buttons, cards) keep their own colour */
html.ds-bridge a:not([class]) { color: var(--ds-gold); }
html.ds-bridge :focus-visible { outline: 3px solid var(--ds-gold); outline-offset: 2px; }

/* navigation */
html.ds-bridge .app-nav { background: color-mix(in srgb, var(--ds-bg) 82%, transparent); backdrop-filter: saturate(1.4) blur(12px);
  -webkit-backdrop-filter: saturate(1.4) blur(12px); border-bottom: 1px solid var(--ds-line); box-shadow: none; }
html.ds-bridge .app-nav .links a { color: var(--ds-text-2); }
html.ds-bridge .app-nav .links a:hover { color: var(--ds-gold); }
html.ds-bridge .app-nav .links a.logout { border-color: var(--ds-line-2); color: var(--ds-text); }
html.ds-bridge .app-nav .brand, html.ds-bridge .app-nav .brand .gold { color: var(--ds-text); }
html.ds-bridge .app-nav .brand .gold { color: var(--ds-gold); }
/* the purple logo would vanish on dark: show it in white */
html.ds-bridge:not([data-theme="light"]) .logo-img,
html.ds-bridge:not([data-theme="light"]) .app-nav .brand img,
html.ds-bridge:not([data-theme="light"]) .auth-card .brand img { filter: brightness(0) invert(1); }
.ds-nav-toggle { margin-left: 6px; width: 38px; height: 38px; }

/* pages with their own top bar (plan pages, homepage-style nav) */
html.ds-bridge body > nav:not(.app-nav) { background: color-mix(in srgb, var(--ds-bg) 84%, transparent) !important;
  border-bottom: 1px solid var(--ds-line); box-shadow: none !important; }
html.ds-bridge .nav-link, html.ds-bridge .mobile-menu a { color: var(--ds-text-2); }
html.ds-bridge .nav-link:hover, html.ds-bridge .mobile-menu a:hover { color: var(--ds-gold); }
html.ds-bridge .mobile-menu { background: var(--ds-bg-2) !important; border-color: var(--ds-line) !important; }
html.ds-bridge .hamburger span { background: var(--ds-text) !important; }
html.ds-bridge .cart-toggle { color: var(--ds-gold); }

/* edition tabs and Mods & Plugins block on the plan page */
html.ds-bridge .ed-tab { background: var(--ds-surface); border-color: var(--ds-line-2); color: var(--ds-text-2); }
html.ds-bridge .ed-tab.active { background: var(--ds-gold-fill); border-color: var(--ds-gold-fill); color: var(--ds-gold-ink);
  box-shadow: 0 3px 0 #b88a00, var(--ds-glow-gold); }
html.ds-bridge .ed-tab.active small { color: rgba(36,26,0,.75); }
html.ds-bridge .mods-block { background: var(--ds-surface-2); border-color: var(--ds-line); }
html.ds-bridge .mods-support li, html.ds-bridge .mods-guide2 > div { background: var(--ds-bg-2); border-color: var(--ds-line); }
html.ds-bridge .cmp-table thead th, html.ds-bridge .cmp-table th[scope=row] { background: var(--ds-surface); }
html.ds-bridge .cmp-table tr.grp th { background: var(--ds-surface-2); }

/* surfaces */
html.ds-bridge .card, html.ds-bridge .plan, html.ds-bridge .feature, html.ds-bridge .stat, html.ds-bridge .auth-card {
  background: var(--ds-surface); border-color: var(--ds-line); box-shadow: var(--ds-shadow); }
html.ds-bridge .card h2 { color: var(--ds-text); }
html.ds-bridge table { background: transparent; }
html.ds-bridge th { color: var(--ds-muted); border-color: var(--ds-line); }
html.ds-bridge td { border-color: var(--ds-line); color: var(--ds-text-2); }
html.ds-bridge hr { border-color: var(--ds-line); }

/* forms */
html.ds-bridge label { color: var(--ds-text-2); }
html.ds-bridge input, html.ds-bridge textarea, html.ds-bridge select { background: var(--ds-bg-2); color: var(--ds-text); border-color: var(--ds-line-2); }
html.ds-bridge input:focus, html.ds-bridge textarea:focus, html.ds-bridge select:focus { border-color: var(--ds-gold); box-shadow: 0 0 0 4px rgba(255,192,0,.16); }
html.ds-bridge input::placeholder, html.ds-bridge textarea::placeholder { color: var(--ds-muted); }
html.ds-bridge input[type=checkbox], html.ds-bridge input[type=radio] { accent-color: var(--ds-gold); }

/* buttons */
html.ds-bridge .btn { border-radius: var(--ds-r); transition: transform .15s var(--ds-ease), box-shadow .2s, background .2s; }
html.ds-bridge .btn:hover { transform: translateY(-1px); }
html.ds-bridge .btn-gold, html.ds-bridge .card-btn.fill { background: var(--ds-gold-fill); color: var(--ds-gold-ink) !important; border: 0;
  box-shadow: 0 3px 0 #b88a00, var(--ds-glow-gold); }
html.ds-bridge .btn-gold:hover, html.ds-bridge .card-btn.fill:hover { background: #ffcb2e; }
html.ds-bridge .btn-purple, html.ds-bridge .card-btn.cart { background: var(--ds-purple-deep); color: #fff !important; border: 1px solid #7a4b96; }
html.ds-bridge .btn-purple:hover, html.ds-bridge .card-btn.cart:hover { background: #6e3d86; box-shadow: var(--ds-glow-purple); }
html.ds-bridge .btn-outline { background: transparent; color: var(--ds-text) !important; border-color: var(--ds-line-2); }
html.ds-bridge .btn-outline:hover { border-color: var(--ds-gold); color: var(--ds-gold) !important; }

/* feedback */
html.ds-bridge .flash { background: var(--ds-surface-2); border: 1px solid var(--ds-line-2); color: var(--ds-text); }
html.ds-bridge .flash.success { border-color: color-mix(in srgb, var(--ds-ok) 50%, transparent); }
html.ds-bridge .flash.error { border-color: color-mix(in srgb, var(--ds-bad) 50%, transparent); }
html.ds-bridge .badge { background: var(--ds-surface-2); color: var(--ds-text-2); border: 1px solid var(--ds-line); }
html.ds-bridge .list-empty { color: var(--ds-muted); }

/* plan cards: top plans get the animated premium border */
html.ds-bridge .plan { border-radius: var(--ds-r-lg); transition: transform .2s var(--ds-ease), box-shadow .2s; }
html.ds-bridge .plan:hover { transform: translateY(-3px); box-shadow: var(--ds-shadow), var(--ds-glow-purple); }
html.ds-bridge .plan.ds-top { border: 1px solid transparent;
  background: linear-gradient(var(--ds-surface), var(--ds-surface)) padding-box,
              conic-gradient(from var(--ds-angle, 0deg), var(--ds-gold), var(--ds-purple), var(--ds-gold-2), var(--ds-purple-2), var(--ds-gold)) border-box;
  animation: ds-spin 6s linear infinite; }
html.ds-bridge .plan .price { color: var(--ds-text); }
html.ds-bridge .plan .ram { color: var(--ds-gold); }
html.ds-bridge .ds-plan-tag { position: absolute; top: -11px; left: 50%; transform: translateX(-50%); white-space: nowrap;
  font-family: var(--ds-font-pixel); font-size: .64rem; letter-spacing: .05em; text-transform: uppercase;
  background: var(--ds-gold-fill); color: var(--ds-gold-ink); padding: 4px 9px; border-radius: 6px; box-shadow: 0 2px 0 #b88a00; }
html.ds-bridge .plan { position: relative; }

/* footer disclaimer injected on pages that have none */
.ds-legal-bar { border-top: 1px solid var(--ds-line); margin-top: 40px; padding: 20px 16px 28px; text-align: center;
  font-size: .76rem; color: var(--ds-muted); line-height: 1.6; background: transparent; }

@media (prefers-reduced-motion: reduce) {
  html.ds-bridge *, html.ds-bridge *::before, html.ds-bridge *::after { animation: none !important; transition: none !important; }
}

/* loading: the panel's spinner becomes the three-block loader */
html.ds-bridge .spinner { display: inline-block; width: 8px; height: 8px; margin: 0 26px 0 2px; vertical-align: middle;
  border: 0 !important; border-radius: 2px; background: var(--ds-gold-fill);
  box-shadow: 12px 0 0 var(--ds-purple-2), 24px 0 0 var(--ds-gold-fill);
  animation: ds-hop .9s var(--ds-ease) infinite !important; }
@keyframes ds-hop { 0%, 100% { transform: translateY(0); opacity: .7; } 50% { transform: translateY(-4px); opacity: 1; } }

/* account dashboard wallet card: inline dark-grey gradient -> theme surfaces */
html.ds-bridge .card[style*="#2a2d37"] { background: linear-gradient(135deg, var(--ds-surface-2), var(--ds-surface)) !important;
  border-color: var(--ds-line-2) !important; box-shadow: var(--ds-shadow), var(--ds-glow-gold) !important; }

/* site-wide (design_site): pages whose nav sits inside <header>, and the about page's
   hard-coded dark-purple body text (written for the old cream background) */
html.ds-bridge header > nav, html.ds-bridge body > header { background: color-mix(in srgb, var(--ds-bg) 84%, transparent) !important;
  border-bottom-color: var(--ds-line) !important; box-shadow: none !important; }
html.ds-bridge .main-content p, html.ds-bridge .main-content ul li { color: var(--ds-text-2); }

/* file pickers: theme the browser's default grey button */
html.ds-bridge input[type=file] { padding: 6px; }
html.ds-bridge input[type=file]::file-selector-button { font: 700 .82rem var(--ds-font); color: var(--ds-text); background: var(--ds-surface-2);
  border: 1px solid var(--ds-line-2); border-radius: 8px; padding: 7px 12px; margin-right: 10px; cursor: pointer; }
html.ds-bridge input[type=file]::file-selector-button:hover { border-color: var(--ds-gold); color: var(--ds-gold); }

/* Arabic pages (2026-10-19): Inter and Baloo 2 have no Arabic letters, so Arabic text fell back to the device's own
   font, and headings to the generic "cursive" one. Cairo (self-hosted, fonts.css) comes first on these pages. */
html[lang="ar"] { --ds-font: "Cairo", "Cairo Fallback", "Inter", "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;
                  --ds-font-display: "Cairo", "Cairo Fallback", "Baloo 2", system-ui, sans-serif; }