/* ════════════════════════════════════════════════════════
   kaia-base.css  —  shared styles for kaia online
   To retheme the whole site, edit the :root block below.
   Dark-mode overrides live in body.dark-mode.
   ════════════════════════════════════════════════════════ */


/* ── font ─────────────────────────────────────────────── */
@font-face {
  font-family: "NDS";
  src: url("/rework/assets/fonts/nds.ttf") format("truetype");
  font-display: swap;
  -webkit-font-smoothing: none;
}


/* ── design tokens: light mode ────────────────────────── */
:root {
  /* backgr */
  --sky:           #d8eaf8;
  --sky2:          #eef5fc;

  /* panels */
  --panel-bg:      #fff;
  --panel-border:  #b6c6df;
  --panel-shadow:  #9ca7c3;
  --panel-head:    #b6c6df;
  --panel-head-b:  #8a99b8;

  /* panel title-bar shadows */
  --head-t-shadow:  #7a93b0;
  --head-b-shadow1: #cddaea;
  --head-b-shadow2: #8a99b8;

  /* aliases used by some pages & header */
  --head-b-s1: var(--head-b-shadow1);
  --head-b-s2: var(--head-b-shadow2);

  /* text */
  --text:          #2a3a50;
  --text-soft:     #6a7e96;
  --link:          #3a7acf;

  /* misc */
  --update-line:   rgba(182, 198, 223, 0.4);
  --divider:       rgba(182, 198, 223, 0.4);
  --today-bg:      rgba(100, 160, 220, 0.18);

  /* header bar */
  --bg-header:     #9eb4d1;
  --border-header: #7e8ba3;

  /* tag colours */
  --tag-bg:     #d6e0f0;
  --tag-border: #8a99b8;

  /* page-specific extras (override per-page if needed) */
  --pull-bg:       #eef5ff;
  --pull-border:   #b6c6df;

  --wall:          #dce8f4;
  --plaque-bg:     #f4f0e8;
  --plaque-border: #c8b89a;
  --plaque-text:   #3a2e20;
  --plaque-soft:   #7a6a52;
  --mat:           #e8e0d0;

  --soft-blue:     #dfe9f8;
  --pale-blue:     #eef5ff;
  --soft-pink:     #ffeef7;
  --soft-yellow:   #eed8ff;
}


/* ── design tokens: dark mode ─────────────────────────── */
body.dark-mode {
  --sky:           #1a2028;
  --sky2:          #11151a;

  --panel-bg:      #1e2530;
  --panel-border:  #151a22;
  --panel-shadow:  #0d1117;
  --panel-head:    #2a3340;
  --panel-head-b:  #151a22;

  --head-t-shadow:  #000;
  --head-b-shadow1: #3a4a60;
  --head-b-shadow2: #10141a;

  --text:          #e0e8f0;
  --text-soft:     #8a99b8;
  --link:          #6b9ac4;

  --update-line:   rgba(255, 255, 255, 0.05);
  --divider:       rgba(255, 255, 255, 0.05);
  --today-bg:      rgba(255, 255, 255, 0.1);

  --bg-header:     #2a3340;
  --border-header: #1a2028;

  --tag-bg:     #2a3340;
  --tag-border: #151a22;

  --pull-bg:       #1a2030;
  --pull-border:   #2a3a50;

  --wall:          #141a20;
  --plaque-bg:     #1e1a14;
  --plaque-border: #3a2e1a;
  --plaque-text:   #d0c4a8;
  --plaque-soft:   #8a7a60;
  --mat:           #28221a;

  --soft-blue:     #1e2d40;
  --pale-blue:     #1a2535;
  --soft-pink:     #2d1e2a;
  --soft-yellow:   #2a1e35;

  /* blend the background gif into the dark gradient */
  background-blend-mode: multiply;
}


/* ── reset ────────────────────────────────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

* {
  cursor: url("/rework/assets/cur/kaiacursor.png"), auto;
}

html {
  font-size: 1rem;
  min-height: 100%;
}


/* ── base body ────────────────────────────────────────── */
body {
  font-family: 'NDS', monospace, sans-serif;
  color: var(--text);
  line-height: 1.5;
  min-height: 100%;
  background:
    url('/rework/assets/general/bkg3.gif'),
    linear-gradient(to bottom, var(--sky) 0%, var(--sky2) 100%);
  background-attachment: fixed;
  background-size: auto, 100% 100%;
  transition: background-color 0.3s, color 0.3s;
}


/* ── panel primitive ──────────────────────────────────── */
/*
  Use class="panel" (or "tile" — both work) for a white card.
  Use class="panel-head" (or inside a .tile, a plain h2) for the title bar.
  Use class="panel-body" for the padded content area.
*/
.panel,
.tile {
  background: var(--panel-bg);
  border: 1px solid var(--panel-border);
  box-shadow: 2px 2px 0 var(--panel-shadow);
  position: relative;
  transition: background 0.3s, border-color 0.3s, box-shadow 0.3s;
}

.panel-head,
.tile h2 {
  background: var(--panel-head);
  border-bottom: 1px solid var(--panel-head-b);
  padding: 0.125rem 0.5rem;
  font-weight: bold;
  letter-spacing: 0.15rem;
  color: #fff;
  text-shadow: 0 1px 0 var(--head-t-shadow);
  box-shadow:
    inset 0 1px 0 var(--head-b-shadow1),
    inset 0 -1px 0 var(--head-b-shadow2);
  transition: background 0.3s, border-color 0.3s;
}

.panel-body,
.tile-body {
  padding: 0.625rem;
}


/* ── tag chips ────────────────────────────────────────── */
.tag {
  font-size: 0.75rem;
  padding: 0.1rem 0.35rem;
  border: 0.1rem solid var(--tag-border);
  background: var(--tag-bg);
  letter-spacing: 0.05rem;
  flex-shrink: 0;
  transition: background 0.3s, border-color 0.3s, color 0.3s;
  color: var(--text);
}

/* coloured tag variants */
.tag.red    { background: #ffc1c1; border-color: #694f4f; color: #3a2020; }
.tag.orange { background: #ffd6ab; border-color: #69594f; color: #3a2c20; }
.tag.yellow { background: #ffffaf; border-color: #69664f; color: #3a3820; }
.tag.green  { background: #aeffaa; border-color: #50694f; color: #1e3a1e; }
.tag.blue   { background: #aeb4ff; border-color: #4f5b69; color: #1e2a3a; }
.tag.purple { background: #bf98ff; border-color: #614f69; color: #2a1e3a; }
.tag.pink   { background: #ffb1fb; border-color: #694f63; color: #3a1e38; }

body.dark-mode .tag.red    { background: #3a2020; border-color: #694f4f; color: #ffb0b0; }
body.dark-mode .tag.orange { background: #3a2c20; border-color: #69594f; color: #ffd0a0; }
body.dark-mode .tag.yellow { background: #3a3820; border-color: #69664f; color: #ffffa0; }
body.dark-mode .tag.green  { background: #1e3a1e; border-color: #50694f; color: #a0ffa0; }
body.dark-mode .tag.blue   { background: #1e2a3a; border-color: #4f5b69; color: #a0b0ff; }
body.dark-mode .tag.purple { background: #2a1e3a; border-color: #614f69; color: #c8a0ff; }
body.dark-mode .tag.pink   { background: #3a1e38; border-color: #694f63; color: #ffb0fc; }


/* ── decorative corner sprites ────────────────────────── */
.decor {
  position: absolute;
  width: 2.5rem;
  pointer-events: none;
  user-select: none;
}

.corner-top-right { top: -0.4rem; right: -0.4rem; }
.corner-tr        { top: -0.35rem; right: -0.35rem; }
.corner-bl        { bottom: -0.35rem; left: -0.35rem; }
.corner-br        { bottom: -0.35rem; right: -0.35rem; }


/* ── float animation ──────────────────────────────────── */
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-0.25rem); }
}
.hover      { animation: float 2.5s ease-in-out infinite; }
.hover.slow { animation-duration: 4s; }
.hover.fast { animation-duration: 1s; }


/* ── pseudo-button (border-image style) ───────────────── */
.pseudo-button {
  display: inline-block;
  padding: 0;
  border-image: url('/rework/assets/general/divborder1.png') 9 fill round;
  border-style: solid;
  border-width: 0.75rem;
  image-rendering: pixelated;
  color: var(--text);
  text-decoration: none;
  font-family: 'NDS', monospace, sans-serif;
  font-size: 1.5rem;
  letter-spacing: 0.08em;
  line-height: 1;
  text-align: center;
  transition: transform 0.2s ease-in-out, color 0.3s;
}

.pseudo-button:hover {
  transform: scale(1.05) rotate(2deg);
  cursor: pointer;
}


/* ── footer ───────────────────────────────────────────── */
footer {
  text-align: center;
  font-size: 80%;
  margin: 0.75rem 0 1rem;
  color: var(--text-soft);
  transition: color 0.3s;
}


/* ── scrollbar ────────────────────────────────────────── */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--panel-head) transparent;
}

::-webkit-scrollbar { width: 0.6rem; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background-color: var(--panel-border);
  border: 0.15rem solid transparent;
}
::-webkit-scrollbar-thumb:hover { background-color: var(--panel-head); }