:root {
  --violet-300: #c4a6ff;
  --violet-400: #a878ff;
  --violet-500: #8b5cf6;
  --violet-600: #7c3aed;
  --violet-700: #6126c4;

  --rose: #ec4899;
  --rose-deep: #c2228a;
  --gold: #e3b341;
  --gold-deep: #b8860b;

  --radius-sm: 12px;
  --radius: 18px;
  --radius-lg: 26px;
  --radius-xl: 36px;

  --maxw: 1200px;
  --nav-h: 76px;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-ink: cubic-bezier(0.62, 0.01, 0.18, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  --font-display: "Shippori Mincho B1", "Noto Serif JP", serif;
  --font-body: "Zen Kaku Gothic New", "Noto Sans JP", system-ui, sans-serif;
  --font-brush: "Yuji Syuku", "Shippori Mincho B1", serif;
}

:root[data-theme="dark"] {
  --bg: #0a0810;
  --bg-2: #100d18;
  --bg-3: #16121f;
  --washi: rgba(244, 239, 227, 0.035);
  --washi-strong: rgba(244, 239, 227, 0.06);
  --ink-line: rgba(244, 239, 227, 0.1);
  --ink-line-strong: rgba(196, 166, 255, 0.26);

  --text: #f4efe3;
  --text-soft: #c8c0b1;
  --text-mute: #8a8170;

  --primary: #a878ff;
  --primary-bright: #c4a6ff;
  --accent: var(--rose);
  --seal: var(--gold);

  --glow: rgba(168, 120, 255, 0.5);
  --glow-soft: rgba(168, 120, 255, 0.18);
  --glow-rose: rgba(236, 72, 153, 0.45);

  --sun: radial-gradient(circle, #ff6ec7 0%, #ec4899 42%, rgba(236, 72, 153, 0) 70%);
  --shadow: 0 34px 80px -34px rgba(0, 0, 0, 0.9);
  --shadow-soft: 0 18px 50px -28px rgba(0, 0, 0, 0.85);
  --shadow-glow: 0 30px 70px -30px var(--glow);

  --pattern-ink: rgba(196, 166, 255, 0.07);
  --grain: 0.05;
  --card-grad: linear-gradient(160deg, rgba(244, 239, 227, 0.05), rgba(244, 239, 227, 0.015));
}

:root[data-theme="light"] {
  --bg: #efe6d2;
  --bg-2: #e8dcc3;
  --bg-3: #f6efe0;
  --washi: rgba(28, 23, 16, 0.028);
  --washi-strong: rgba(255, 252, 245, 0.75);
  --ink-line: rgba(28, 23, 16, 0.12);
  --ink-line-strong: rgba(97, 38, 196, 0.28);

  --text: #1c1710;
  --text-soft: #4a4234;
  --text-mute: #756a55;

  --primary: #6126c4;
  --primary-bright: #7c3aed;
  --rose: #c41d80;
  --rose-deep: #a3186a;
  --accent: var(--rose-deep);
  --seal: var(--gold-deep);

  --glow: rgba(97, 38, 196, 0.26);
  --glow-soft: rgba(97, 38, 196, 0.12);
  --glow-rose: rgba(194, 34, 138, 0.22);

  --sun: radial-gradient(circle, #e84aa0 0%, #c41d80 44%, rgba(194, 34, 138, 0) 70%);
  --shadow: 0 34px 70px -36px rgba(74, 40, 12, 0.42);
  --shadow-soft: 0 18px 44px -28px rgba(74, 40, 12, 0.34);
  --shadow-glow: 0 30px 64px -32px var(--glow);

  --pattern-ink: rgba(28, 23, 16, 0.07);
  --grain: 0.03;
  --card-grad: linear-gradient(160deg, rgba(255, 252, 245, 0.92), rgba(255, 250, 240, 0.7));
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scrollbar-width: thin;
  scrollbar-color: var(--rose) transparent;
}

body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text);
  line-height: 1.65;
  overflow-x: hidden;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  transition: background 0.7s var(--ease-out), color 0.5s var(--ease-out);
}

body.is-locked {
  overflow: hidden;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: 0.01em;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  display: block;
  max-width: 100%;
}

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
  color: inherit;
}

ul {
  list-style: none;
}

::selection {
  background: var(--rose);
  color: #fff;
}

:focus-visible {
  outline: 2px solid var(--primary-bright);
  outline-offset: 3px;
  border-radius: 4px;
}

::-webkit-scrollbar {
  width: 9px;
  height: 9px;
  background: transparent;
}

::-webkit-scrollbar-track {
  background: transparent;
  border: none;
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #ff7ac6, var(--rose) 55%, var(--primary));
  border-radius: 99px;
  border: 2px solid transparent;
  background-clip: padding-box;
  min-height: 48px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18), 0 0 10px -1px var(--glow-rose);
  transition: background 0.3s var(--ease-out);
}

::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #ff9ad6, var(--rose));
  background-clip: padding-box;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.28), 0 0 16px 1px var(--glow-rose);
}

::-webkit-scrollbar-corner {
  background: transparent;
}