@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/s/fonts/InterVariable.woff2") format("woff2");
}

:root {
  --sky-0: #FFFFFF;
  --sky-1: #FFFFFF;
  --sky-2: #FFFFFF;
  --horizon: #FFFFFF;
  --ink: #111114;
  --ink-soft: #4A4A52;
  --ink-faint: #6A6A72;
  --surface: #FFFFFF;
  --surface-2: #F5F5F7;
  --line: rgba(17, 17, 20, 0.1);
  --line-strong: rgba(17, 17, 20, 0.24);
  --accent: #4B2FBF;
  --accent-deep: #3A2399;
  --accent-ink: #FFFFFF;
  --night: #000000;
  --night-ink: #F5F5F7;

  --mark-ink: #2D1B69;
  --mark-line: #FFFFFF;

  --ok: #1F6F5C;
  --ok-soft: #E8F1ED;
  --warn: #7A4E1A;
  --warn-soft: #FBF2E7;
  --bad: #94402D;
  --bad-soft: #F7ECEA;

  --books: #4B2FBF;
  --books-deep: #3A2399;
  --books-soft: #F1EEFB;
  --books-ink: #FFFFFF;
  --books-glow: 0 0 0 1px rgba(75, 47, 191, 0.24), 0 18px 60px rgba(75, 47, 191, 0.18);

  --shadow-1: 0 1px 2px rgba(17, 17, 20, 0.04), 0 2px 10px rgba(17, 17, 20, 0.04);
  --shadow-2: 0 2px 6px rgba(17, 17, 20, 0.05), 0 16px 40px rgba(17, 17, 20, 0.07);
  --shadow-3: 0 8px 20px rgba(17, 17, 20, 0.07), 0 34px 80px rgba(17, 17, 20, 0.12);
  --glow: 0 0 0 1px rgba(75, 47, 191, 0.18), 0 10px 40px rgba(75, 47, 191, 0.16);

  --font-display: "Inter", system-ui, "Segoe UI", Roboto, Arial, sans-serif;
  --font-text: "Inter", system-ui, "Segoe UI", Roboto, Arial, sans-serif;
  --font-mono: ui-monospace, "Cascadia Mono", "Roboto Mono", monospace;

  --fs-xs: clamp(0.78rem, 0.755rem + 0.11vw, 0.84rem);
  --fs-sm: clamp(0.9rem, 0.865rem + 0.17vw, 0.98rem);
  --fs-md: clamp(1.04rem, 0.99rem + 0.24vw, 1.18rem);
  --fs-lg: clamp(1.2rem, 1.1rem + 0.5vw, 1.5rem);
  --fs-xl: clamp(1.5rem, 1.26rem + 1.1vw, 2.2rem);
  --fs-2xl: clamp(2rem, 1.4rem + 2.8vw, 3.6rem);
  --fs-3xl: clamp(2.6rem, 1.6rem + 4.6vw, 5.2rem);
  --fs-4xl: clamp(3.1rem, 1.6rem + 7vw, 7.4rem);

  --lh-tight: 1.02;
  --lh-head: 1.06;
  --lh-body: 1.55;
  --measure: 34ch;
  --measure-wide: 54ch;

  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 14px;
  --sp-4: 22px;
  --sp-5: 34px;
  --sp-6: clamp(40px, 5vw, 60px);
  --sp-7: clamp(60px, 8vw, 104px);
  --sp-8: clamp(84px, 12vw, 168px);

  --r-1: 8px;
  --r-2: 14px;
  --r-3: 22px;
  --r-4: 34px;
  --r-pill: 999px;

  --container: min(1180px, 100% - 2 * var(--sp-4));
  --tap: 44px;

  --ease: cubic-bezier(0.22, 0.68, 0.24, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-1: 200ms;
  --dur-2: 520ms;
  --dur-3: 900ms;

  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);

  --z-sky: 0;
  --z-content: 1;
  --z-nav: 50;
  --z-menu: 60;
}

[data-ground="night"] {
  --sky-0: #000000;
  --sky-1: #000000;
  --sky-2: #000000;
  --horizon: #000000;
  --night: #000000;
  --mark-ink: #2D1B69;
  --mark-line: #FFFFFF;
}

[data-ground="night"],
.chapter.dark {
  --ink: #F5F5F7;
  --ink-soft: #B4B4BC;
  --ink-faint: #9A9AA3;
  --surface: #161618;
  --surface-2: #0B0B0E;
  --line: rgba(245, 245, 247, 0.12);
  --line-strong: rgba(245, 245, 247, 0.28);
  --accent: #A78BFA;
  --accent-deep: #C4B2FC;
  --accent-ink: #16092F;
  --night-ink: #F5F5F7;

  --ok: #7FD3B8;
  --ok-soft: rgba(127, 211, 184, 0.12);
  --warn: #E9BC7E;
  --warn-soft: rgba(233, 188, 126, 0.12);
  --bad: #EFA08E;
  --bad-soft: rgba(239, 160, 142, 0.12);

  --books: #A78BFA;
  --books-deep: #C4B2FC;
  --books-soft: rgba(167, 139, 250, 0.12);
  --books-ink: #16092F;
  --books-glow: 0 0 0 1px rgba(167, 139, 250, 0.3), 0 18px 60px rgba(167, 139, 250, 0.16);

  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.5);
  --shadow-2: 0 2px 6px rgba(0, 0, 0, 0.5), 0 14px 38px rgba(0, 0, 0, 0.45);
  --shadow-3: 0 8px 20px rgba(0, 0, 0, 0.55), 0 34px 80px rgba(0, 0, 0, 0.6);
  --glow: 0 0 0 1px rgba(167, 139, 250, 0.3), 0 10px 44px rgba(167, 139, 250, 0.16);
}

.chapter.dark { --mark-ink: #2D1B69; --mark-line: #FFFFFF; }