/* Plus Jakarta Sans (Tokotype). Self-hosted. */
@font-face{font-family:"Plus Jakarta Sans";src:url(../fonts/plus-jakarta-sans-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Plus Jakarta Sans";src:url(../fonts/plus-jakarta-sans-latin-500-normal.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Plus Jakarta Sans";src:url(../fonts/plus-jakarta-sans-latin-600-normal.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Plus Jakarta Sans";src:url(../fonts/plus-jakarta-sans-latin-700-normal.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Plus Jakarta Sans";src:url(../fonts/plus-jakarta-sans-latin-800-normal.woff2) format("woff2");font-weight:800;font-display:swap}

/* Light mode (default) */
:root{
  --bg:#f4f5f7;
  --surface:#fbfbfc;
  --tint:#f6e9e9;
  --ink:#17191e;
  --muted:#525866;
  --line:#dde0e6;
  --accent:#9b1c1f;
  --accent-ink:#fbfbfc;
  --danger:#b42318;
  --ok:#1f6f43;
  --shadow:0 18px 40px -24px rgb(60 20 22 / .35);
  --radius:14px;
  --font:"Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  color-scheme:light;
}

/* Dark mode: follows the device unless the visitor chose light. */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#121418; --surface:#1a1d22; --tint:#2a1a1c; --ink:#eceef1; --muted:#a3a9b4; --line:#2c3038;
    --accent:#f08a8c; --accent-ink:#1a0d0e; --danger:#ff8f86; --ok:#7fd4a2;
    --shadow:0 18px 40px -24px rgb(0 0 0 / .7);
    color-scheme:dark;
  }
  :root:not([data-theme="light"]) .i-sun{display:block}
  :root:not([data-theme="light"]) .i-moon{display:none}
}
/* Dark mode chosen with the toggle */
:root[data-theme="dark"]{
  --bg:#121418; --surface:#1a1d22; --tint:#2a1a1c; --ink:#eceef1; --muted:#a3a9b4; --line:#2c3038;
  --accent:#f08a8c; --accent-ink:#1a0d0e; --danger:#ff8f86; --ok:#7fd4a2;
  --shadow:0 18px 40px -24px rgb(0 0 0 / .7);
  color-scheme:dark;
}
:root[data-theme="dark"] .i-sun{display:block}
:root[data-theme="dark"] .i-moon{display:none}
.i-sun{display:none}

.theme-toggle{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:999px;border:1px solid var(--line);background:transparent;color:var(--ink);cursor:pointer;transition:border-color .2s,transform .2s cubic-bezier(.16,1,.3,1)}
.theme-toggle:hover{border-color:var(--ink)}
.theme-toggle:active{transform:scale(.94)}
.theme-toggle svg{width:18px;height:18px;fill:currentColor}