/* IRCFG — day / night mode for the public pages (2026-10-07)
   Night (dark) is the default and is untouched: everything below only applies
   when <html data-theme="light"> is set by the visitor via the nav button.
   Page-specific light overrides live at the end of each page's own <style>. */

/* ---------------------------------------------------------------- toggle button (both themes) */
.theme-toggle{position:relative;flex:0 0 auto;width:34px;height:34px;padding:0;border-radius:50%;
  display:inline-grid;place-items:center;background:transparent;border:1px solid var(--border);
  color:var(--text-mid);cursor:pointer;font:inherit;
  transition:color .25s,border-color .25s,background .25s,box-shadow .25s}
.theme-toggle:hover{color:var(--blue);border-color:var(--blue);box-shadow:var(--blue-glow)}
.theme-toggle svg{grid-area:1/1;width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round;transition:opacity .3s,transform .45s cubic-bezier(.22,1,.36,1)}
.theme-toggle .i-moon{opacity:0;transform:rotate(-70deg) scale(.5)}
html[data-theme="light"] .theme-toggle .i-sun{opacity:0;transform:rotate(70deg) scale(.5)}
html[data-theme="light"] .theme-toggle .i-moon{opacity:1;transform:none}
.tb-links .theme-toggle{width:38px;height:38px;border-radius:10px;border-color:var(--border-soft)}
@media(max-width:680px){
  .nav-right{gap:10px}
  .nav-right .theme-toggle{width:30px;height:30px}
  .nav-right .theme-toggle svg{width:15px;height:15px}
}
/* small phones: tighten the nav row so the extra button still fits */
@media(max-width:420px){
  .nav-right{gap:7px}
  .nav-auth{gap:6px}
  .nav-btn{padding:6px 10px}
  .lang-toggle button{padding:5px 8px}
  .nav-right .theme-toggle{width:28px;height:28px}
}

/* short colour cross-fade while switching (class added by site-theme.js) */
html.theme-anim,html.theme-anim *,html.theme-anim *::before,html.theme-anim *::after{
  transition:background-color .35s ease,color .35s ease,border-color .35s ease,fill .35s ease,stroke .35s ease!important}

/* ---------------------------------------------------------------- day tokens */
html[data-theme="light"]{
  color-scheme:light;
  --bg:#F3F6FA; --surface:#FFFFFF; --surface-2:#EDF2F8;
  --blue:#0077C8; --green:#159A00; --red:#D92B2B; --amber:#B86E00;
  --text:#0E1826; --text-mid:#4B5B70; --text-dim:#7B889B;
  --border:rgba(0,119,200,.22); --border-soft:rgba(14,24,38,.10);
  --glass:rgba(255,255,255,.80);
  --blue-glow:0 6px 24px rgba(0,119,200,.22);
  --green-glow:0 6px 22px rgba(21,154,0,.22);
}
html[data-theme="light"] ::selection{background:rgba(0,119,200,.22);color:var(--text)}

/* backdrop */
html[data-theme="light"] #grid-bg{
  background-image:linear-gradient(rgba(0,119,200,.07) 1px,transparent 1px),
    linear-gradient(90deg,rgba(0,119,200,.07) 1px,transparent 1px)}
html[data-theme="light"] .vignette{
  background:radial-gradient(ellipse 80% 80% at 50% 45%,transparent 45%,rgba(243,246,250,.6) 100%)}

/* nav */
html[data-theme="light"] nav.scrolled{background:rgba(255,255,255,.82);box-shadow:0 6px 24px rgba(14,24,38,.06)}
html[data-theme="light"] .lang-toggle button.active{color:#fff}
html[data-theme="light"] .nav-btn.login{color:#fff}
html[data-theme="light"] .nav-btn.login:hover{box-shadow:0 8px 28px rgba(0,119,200,.35)}
html[data-theme="light"] .nav-btn.register:hover{box-shadow:0 8px 28px rgba(21,154,0,.35)}
@media(max-width:680px){
  html[data-theme="light"] nav.open .nav-links{background:rgba(255,255,255,.97);box-shadow:0 18px 40px rgba(14,24,38,.10)}
}

/* form controls */
html[data-theme="light"] input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
html[data-theme="light"] select,
html[data-theme="light"] textarea{background-color:#fff}
html[data-theme="light"] input:focus,
html[data-theme="light"] select:focus,
html[data-theme="light"] textarea:focus{box-shadow:0 0 0 3px rgba(0,119,200,.14)}

/* toasts */
html[data-theme="light"] .toast{box-shadow:0 12px 36px rgba(14,24,38,.14)}