/* App-wide polish on top of Unfold: canvas tint, rounder surfaces, sign-in backdrop. Loaded on every page. */
html:not(.dark) body { background-color:#f7f7f8; }
html.dark body { background-color:#111111; }
#nav-sidebar, [id="nav-sidebar"] { backdrop-filter:saturate(1.2); }
.material-symbols-outlined { font-variation-settings:"FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24; }
/* Sign-in and other unauthenticated pages */
body.login, body:has(#login-form) {
  background:
    radial-gradient(900px 500px at 10% -10%, rgba(47,91,211,.10), transparent 60%),
    #f7f7f8 !important;
}
html.dark body:has(#login-form) { background:#111111 !important; }
#login-form { margin-top:4px; }

/* Dark mode: true neutral greys, no blue or purple cast on surfaces. One soft blue accent for the main action and links;
   status colours (green, amber, red) for meaning. Unfold reads these variables for every surface. */
html.dark {
  color-scheme: dark;
  --color-base-50:#fafafa; --color-base-100:#f5f5f5; --color-base-200:#e5e5e5; --color-base-300:#d4d4d4; --color-base-400:#a3a3a3;
  --color-base-500:#8a8a8a; --color-base-600:#5c5c5c; --color-base-700:#3a3a3a; --color-base-800:#262626; --color-base-900:#171717; --color-base-950:#0d0d0d;
  --color-primary-50:#f0f5ff; --color-primary-100:#e1ebff; --color-primary-200:#c9d9ff; --color-primary-300:#b3caff; --color-primary-400:#bcd1ff;
  --color-primary-500:#a9c4ff; --color-primary-600:#a9c4ff; --color-primary-700:#8fb0f5; --color-primary-800:#2c3a57; --color-primary-900:#1f2737; --color-primary-950:#171c26;
}
html.dark .bg-primary-600, html.dark .bg-primary-600 * { color:#0e1f45 !important; }
html.dark .bg-primary-600:hover { background-color:#bcd1ff; }
html.dark input[type=checkbox]:checked, html.dark input[type=radio]:checked { accent-color:#a9c4ff; }
html.dark ::selection { background:#2c3a57; color:#fff; }
/* Natural feel everywhere: gentle transitions and soft focus rings. */
a, button, .btn, input, select, textarea { transition:background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease; }
:focus-visible { outline:2px solid var(--color-primary-500); outline-offset:2px; }