/* Iro Investment: shared styles. Page layout lives inline in each page; this file holds
   the colour themes, shared classes and the light/black mode behaviour. */

:root {
  --bg: #FFFFFF;
  --ink: #0E0E10;
  --body: #3C3C42;
  --muted: #5A5A60;
  --line: #E4E4E2;
  --rule: #0E0E10;
  --soft: #F4F4F2;
  --soft-green: #F1F7F3;
  --btn-bg: #0E0E10;
  --btn-ink: #FFFFFF;
  --green: #1B7A4A;
  --pill: #C9C9C6;
  color-scheme: light;
}

:root[data-theme="dark"] {
  --bg: #0B0B0C;
  --ink: #F2F2EF;
  --body: #C4C4C1;
  --muted: #9C9CA2;
  --line: #26262A;
  --rule: #F2F2EF;
  --soft: #161618;
  --soft-green: #0F1D16;
  --btn-bg: #F2F2EF;
  --btn-ink: #0E0E10;
  --green: #5BC08B;
  --pill: #4A4A50;
  color-scheme: dark;
}

/* Only used if scripts are switched off: follow the device setting. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --bg: #0B0B0C; --ink: #F2F2EF; --body: #C4C4C1; --muted: #9C9CA2; --line: #26262A;
    --rule: #F2F2EF; --soft: #161618; --soft-green: #0F1D16; --btn-bg: #F2F2EF;
    --btn-ink: #0E0E10; --green: #5BC08B; --pill: #4A4A50; color-scheme: dark;
  }
  :root:not([data-theme]) .xfade { opacity: 1; }
}

body { margin: 0; background: var(--bg); }
body.page-aka { background: #C2271D; }
body.page-kuro { background: #111113; }

[hidden] { display: none !important; }
a { color: inherit; }
a:hover { opacity: 0.72; }
:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
[id] { scroll-margin-top: 100px; }

/* Light / black mode switch: a 0.45s fade. */
::view-transition-old(root),
::view-transition-new(root) { animation-duration: 0.45s; animation-timing-function: ease; }
.theme-anim, .theme-anim * { transition: background-color 0.45s ease, border-color 0.45s ease; }
.theme-anim .xfade { transition: opacity 0.45s ease; }

/* Images with a black-mode version: the dark copy sits on top and fades in. */
.xfade { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; opacity: 0; }
:root[data-theme="dark"] .xfade { opacity: 1; }

/* Toggle icons: moon in light mode, sun in black mode. */
.i-sun { display: none; }
:root[data-theme="dark"] .i-sun { display: block; }
:root[data-theme="dark"] .i-moon { display: none; }

/* Strategy colour textures. */
.tex-aka { background: #C2271D url(img/tex-aka.webp) center / cover no-repeat; }
.tex-midori { background: #1B7A4A url(img/tex-midori.webp) center / cover no-repeat; }
.tex-kuro { background: #111113 url(img/tex-kuro.webp) center / cover no-repeat; }
.bg-universe { background: #111113 url(img/universe.webp) right center / cover no-repeat; }