/* ============================================================ Tadfeen Trust — Light / Dark theme ------------------------------------------------------------ The whole palette lives in custom properties, so dark mode is a token swap rather than a second stylesheet. Surfaces that were hardcoded #fff are now var(--paper) and follow along. The theme is applied as data-theme on , written by PHP from a cookie before the first paint. That ordering matters: setting it from JavaScript after load makes the page flash white on every navigation. "auto" follows the operating system setting. ============================================================ */ /* ---------- dark palette ---------- */ html[data-theme="dark"]{ --cream:#121815; /* page background */ --cream-2:#161d19; /* subtle bands */ --paper:#1b2420; /* cards and panels */ --ink:#e6ece8; /* body text */ --muted:#9aa8a1; /* secondary text */ --line:#2b3833; /* borders */ --ink-2:#c6d2cc; /* secondary heading text */ --muted-2:#8d9b94; /* faintest label text */ /* Greens are lifted: the light-mode greens are tuned against cream and go muddy on a dark ground. */ --green-050:#1d2c25; --green-100:#22362d; --green-600:#5fbf94; --green-700:#4aa87e; --green-800:#3d9370; --gold-050:#2b2416; --gold-600:#d9b166; --shadow-sm:0 1px 2px rgba(0,0,0,.4); --shadow:0 6px 20px rgba(0,0,0,.45); color-scheme:dark; } /* Follow the OS when the user has not chosen explicitly. */ @media (prefers-color-scheme:dark){ html[data-theme="auto"]{ --cream:#121815;--cream-2:#161d19;--paper:#1b2420; --ink:#e6ece8;--muted:#9aa8a1;--line:#2b3833; --ink-2:#c6d2cc;--muted-2:#8d9b94; --green-050:#1d2c25;--green-100:#22362d; --green-600:#5fbf94;--green-700:#4aa87e;--green-800:#3d9370; --gold-050:#2b2416;--gold-600:#d9b166; --shadow-sm:0 1px 2px rgba(0,0,0,.4); --shadow:0 6px 20px rgba(0,0,0,.45); color-scheme:dark; } } /* ---------- corrections dark mode needs ---------- A handful of places assume a light ground. */ html[data-theme="dark"] body, html[data-theme="auto"] body{background:var(--cream);color:var(--ink)} /* The sidebar is already dark green in light mode; deepen it so it does not glow against a dark page. */ html[data-theme="dark"] .app-sidebar{ background:linear-gradient(180deg,#0c1a14 0%,#0a1610 100%); border-right:1px solid var(--line); } /* Inputs keep their own surface so fields stay findable. */ html[data-theme="dark"] input, html[data-theme="dark"] select, html[data-theme="dark"] textarea{ background:#141c18;color:var(--ink);border-color:var(--line); } html[data-theme="dark"] input::placeholder, html[data-theme="dark"] textarea::placeholder{color:#6f7d76} /* Images and charts should not be blown out on a dark ground. */ html[data-theme="dark"] img:not([src*=".svg"]){filter:brightness(.94)} /* ---------- the toggle control ---------- */ .theme-toggle{ display:inline-flex;align-items:center;justify-content:center; width:32px;height:32px;flex:0 0 32px; border:1px solid var(--line);border-radius:9px; background:var(--paper);color:var(--muted); cursor:pointer;transition:background .15s,color .15s,border-color .15s; } .theme-toggle:hover{color:var(--green-700);border-color:var(--green-600)} .theme-toggle svg{width:16px;height:16px} .theme-toggle .icon-moon{display:none} html[data-theme="dark"] .theme-toggle .icon-sun{display:none} html[data-theme="dark"] .theme-toggle .icon-moon{display:block} @media (prefers-color-scheme:dark){ html[data-theme="auto"] .theme-toggle .icon-sun{display:none} html[data-theme="auto"] .theme-toggle .icon-moon{display:block} } /* Colours change instantly on toggle, but only colours — no transition on layout, and nothing at all for users who have asked for reduced motion. */ @media (prefers-reduced-motion:no-preference){ body,.astat,.stat-card,.pcard,.cpanel,.alp-card,.app-sidebar{ transition:background-color .18s ease,border-color .18s ease,color .18s ease; } }