/* Pearl House Style — the single source of colors and fonts for Knowledge Space and every page it links to.
   Approved by the operator 2026-09-28 (design plan: https://claude.ai/artifact/V7viKmWzh5FzqhSxH1jJpP).
   Pages link this file; scripts/design/apply_house_style.py maps each page's own palette onto these values,
   and scripts/ci/check_house_style.py rejects any other color. */
@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500;600;700&family=DM+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400&family=DM+Mono:wght@400;500&family=Noto+Sans+JP:wght@400;600&family=Noto+Sans+TC:wght@400;600&family=Noto+Sans+SC:wght@400;600&display=swap");

:root {
  color-scheme: dark;
  --ph-night: #130A22;
  --ph-plum: #1E1233;
  --ph-plum-2: #2A1A47;
  --ph-line: #3B2860;
  --ph-violet: #9A7FD6;
  --ph-gold: #FFC62E;
  --ph-gold-deep: #C9941A;
  --ph-gold-hi: #FFD65C;
  --ph-white: #F6F2FB;
  --ph-mist: #B9ADCF;
  --ph-ok: #2FE37A;
  --ph-partial: #4CC9FF;
  --ph-broken: #FF4538;
  --ph-display: "Cormorant Garamond", Georgia, "Times New Roman", "Noto Serif JP", serif;
  --ph-sans: "DM Sans", system-ui, -apple-system, "Segoe UI", "Noto Sans JP", "Noto Sans TC", "Noto Sans SC", sans-serif;
  --ph-mono: "DM Mono", ui-monospace, "SFMono-Regular", Menlo, "Noto Sans JP", monospace;
}

html { background: var(--ph-night); }
body {
  background-color: var(--ph-night);
  color: var(--ph-white);
  font-family: var(--ph-sans);
}
h1, h2 { font-family: var(--ph-display); color: var(--ph-gold); font-weight: 600; letter-spacing: 0; }
h3, h4, h5, h6 { color: var(--ph-white); }
code, kbd, pre, samp { font-family: var(--ph-mono); }
::selection { background: var(--ph-gold); color: var(--ph-night); }
:focus-visible { outline: 2px solid var(--ph-violet); outline-offset: 2px; }
* { scrollbar-color: var(--ph-line) var(--ph-night); }

/* Pearl home button: the pearl mark links every page back to the Knowledge Space hub. */
.ph-home {
  position: fixed;
  right: max(16px, env(safe-area-inset-right, 0px));
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  z-index: 2147483000;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: block;
  box-shadow: 0 0 0 1px var(--ph-line), 0 6px 18px rgba(0, 0, 0, .45);
  transition: box-shadow .2s ease, transform .2s ease;
}
.ph-home img { width: 100%; height: 100%; display: block; border-radius: 50%; }
.ph-home:hover, .ph-home:focus-visible { box-shadow: 0 0 0 2px var(--ph-gold), 0 0 22px rgba(255, 198, 46, .35); transform: translateY(-1px); }
.ph-home::after {
  content: "Knowledge Space";
  position: absolute; right: 54px; top: 50%; transform: translateY(-50%);
  white-space: nowrap; font: 500 12px/1 var(--ph-sans); color: var(--ph-white);
  background: var(--ph-plum); border: 1px solid var(--ph-line); border-radius: 6px; padding: 7px 10px;
  opacity: 0; pointer-events: none; transition: opacity .15s ease;
}
.ph-home:hover::after, .ph-home:focus-visible::after { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .ph-home, .ph-home::after { transition: none; } }
@media print { .ph-home { display: none; } }