/* ===================================================================================================
   THEME SYSTEM. One place that decides how the app looks in light and dark.
   1. TOKENS   brand "chrome" colours (header, menu, sidebar, splash) for each theme
   2. ROLES    which parts of the app use which token
   3. CONTROLS the Light / Dark / Auto switch
   The page content colours (cards, text, borders) come from design-system.css and the dark tokens in pro.css.
   Every text colour below is chosen for at least 4.5:1 contrast on its background.
   =================================================================================================== */

/* ---------- 1. TOKENS ---------- */
:root{
  --chrome-bg:#1B2C1A;          /* header, menu, sidebar, status-bar strip */
  --chrome-bg-2:#26402A;        /* raised tiles and fields inside the chrome */
  --chrome-line:rgba(255,255,255,.14);
  --chrome-hover:rgba(255,255,255,.09);
  --chrome-active:rgba(255,255,255,.16);
  --chrome-text:#F4F8F4;
  --chrome-muted:#B8CCBB;
  --chrome-accent:#86EFAC;
  --splash-bg:#FFFFFF; --splash-bg-2:#EAF5EA;
  --splash-text:#2E7D32; --splash-sub:#4A8A44; --splash-ring:#C8E6C9; --splash-glow:rgba(76,175,80,.22);
}
:root[data-theme="dark"]{
  --chrome-bg:#0B1410;
  --chrome-bg-2:#16251B;
  --chrome-line:rgba(255,255,255,.11);
  --chrome-hover:rgba(255,255,255,.07);
  --chrome-active:rgba(255,255,255,.13);
  --chrome-text:#F1F6F2;
  --chrome-muted:#AABEAE;
  --chrome-accent:#86EFAC;
  --splash-bg:#0B1410; --splash-bg-2:#13251A;
  --splash-text:#86EFAC; --splash-sub:#9CCFA2; --splash-ring:#24402B; --splash-glow:rgba(134,239,172,.16);
}

/* ---------- 2. ROLES ---------- */
html,body{background-color:var(--chrome-bg)}          /* the strip under the clock and any overscroll match the header */
#app{background:var(--bg-app)}
#header{background:var(--chrome-bg);color:var(--chrome-text);border-bottom:1px solid var(--chrome-line)}
#sidebar,#mobile-drawer{background:var(--chrome-bg);color:var(--chrome-text)}
#sidebar{border-right-color:var(--chrome-line)}
#mobile-drawer{top:0;bottom:0;height:100vh;height:100dvh;padding-bottom:env(safe-area-inset-bottom,0px)}
.drawer-hdr{border-bottom-color:var(--chrome-line)}
.logo-text,.drawer-brand,.drawer-name{color:var(--chrome-text)}
.logo-sub,.drawer-sub,.drawer-meta,.drawer-section-label,.sidebar-label,.drawer-foot,.sidebar-footer,.drawer-set-lbl,.drawer-viewer-lbl{color:var(--chrome-muted)}
.nav-item,.drawer-nav-item{color:var(--chrome-muted)}
.nav-item:hover,.drawer-nav-item:hover{color:var(--chrome-text);background:var(--chrome-hover)}
.nav-item.active{color:var(--chrome-text);background:var(--chrome-active)}
.drawer-profile,.drawer-tile{background:var(--chrome-bg-2);border-color:var(--chrome-line);color:var(--chrome-text)}
.drawer-tile:hover,.drawer-tile:focus-visible{background:var(--chrome-active)}
.drawer-tile-ico,.drawer-tile-lbl{color:var(--chrome-text)}
.drawer-profile-btn{color:var(--chrome-text);background:var(--chrome-hover)}
.drawer-search input,#mobile-drawer select{background:var(--chrome-bg-2);border-color:var(--chrome-line);color:var(--chrome-text)}
.drawer-search input::placeholder{color:var(--chrome-muted)}
.drawer-search-ico{color:var(--chrome-muted)}
.hdr-icon-btn{color:var(--chrome-text)}
.fm-head{background:var(--chrome-bg)}
.fm-btn-light{background:#fff;color:#1B2C1A}.fm-btn-light:hover{background:#EAF1EC}   /* the Sell button stays readable on the dark header in both themes */

/* splash screen follows the theme */
#au-splash{background:linear-gradient(180deg,var(--splash-bg) 0%,var(--splash-bg-2) 100%)}
#au-logo-text{color:var(--splash-text)}
#au-logo-tagline{color:var(--splash-sub)}
#au-logo-glow{background:radial-gradient(ellipse,var(--splash-glow) 0%,transparent 68%)}
#au-spin-ring{border-color:var(--splash-ring);border-top-color:var(--splash-text)}
#au-spin-label{color:var(--splash-text)}

/* ---------- 3. CONTROLS ---------- */
.drawer-theme{display:flex;flex-direction:column;gap:8px;padding:12px 16px 6px}
.drawer-theme>span{font-size:var(--fs-xs);font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--chrome-muted)}
.theme-seg{display:grid;grid-template-columns:repeat(3,1fr);gap:3px;padding:3px;background:var(--chrome-bg-2);border:1px solid var(--chrome-line);border-radius:12px}
.theme-seg button{display:flex;align-items:center;justify-content:center;gap:6px;min-height:40px;border:0;border-radius:9px;background:transparent;color:var(--chrome-muted);font:600 var(--fs-sm)/1 inherit;font-family:inherit;cursor:pointer}
.theme-seg button:hover{color:var(--chrome-text)}
.theme-seg button[aria-pressed="true"]{background:var(--chrome-accent);color:#0B1410}
.theme-seg button:focus-visible{outline:2px solid var(--chrome-accent);outline-offset:2px}
.theme-seg svg{width:16px;height:16px;flex:none}