/* LUCE Clinic — Design Tokens */
:root {
  /* Core palette */
  --ivory: #FAF6F1;
  --ivory-deep: #F4EEE5;
  --pearl: #EFE7DC;
  --pink: #E6C9B8;
  --pink-soft: #EFD9CC;
  --pink-deep: #D4A896;
  --black: #0E0E0E;
  --ink: #1A1614;
  --graphite: #3A332E;
  --stone: #6B6259;
  --mist: #A89F95;
  --line: rgba(14, 14, 14, 0.12);
  --line-soft: rgba(14, 14, 14, 0.06);
  --gold: #B89968;

  /* Typography */
  --serif-en: "Cormorant Garamond", "Cormorant", Garamond, serif;
  --serif-jp: "Shippori Mincho", "Hiragino Mincho ProN", "游明朝", "Yu Mincho", serif;
  --sans-jp: "Noto Sans JP", "Hiragino Kaku Gothic ProN", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, monospace;

  /* Scale */
  --fs-hero: clamp(72px, 11vw, 184px);
  --fs-display: clamp(48px, 6.4vw, 104px);
  --fs-h1: clamp(40px, 4.4vw, 72px);
  --fs-h2: clamp(28px, 2.8vw, 44px);
  --fs-h3: clamp(20px, 1.8vw, 28px);
  --fs-body: 15px;
  --fs-small: 12px;
  --fs-eyebrow: 11px;

  /* Spacing */
  --space-xs: 8px;
  --space-s: 16px;
  --space-m: 32px;
  --space-l: 64px;
  --space-xl: 120px;
  --space-xxl: 200px;

  /* Motion */
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-luxe: cubic-bezier(0.19, 1, 0.22, 1);

  --nav-h: 72px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { background: var(--ivory); color: var(--ink); }
body {
  font-family: var(--sans-jp);
  font-size: var(--fs-body);
  line-height: 1.7;
  font-weight: 300;
  letter-spacing: 0.02em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; background: none; border: none; cursor: pointer; color: inherit; }

/* Typography helpers */
.serif-en { font-family: var(--serif-en); font-weight: 300; letter-spacing: 0.01em; }
.serif-en-i { font-family: var(--serif-en); font-style: italic; font-weight: 300; }
.serif-jp { font-family: var(--serif-jp); font-weight: 300; }
.mono { font-family: var(--mono); font-weight: 400; letter-spacing: 0.1em; text-transform: uppercase; }

.eyebrow {
  font-family: var(--serif-en);
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--stone);
  font-weight: 400;
}
.eyebrow::before {
  content: "";
  display: inline-block;
  width: 28px;
  height: 1px;
  background: currentColor;
  vertical-align: middle;
  margin-right: 14px;
  opacity: 0.6;
}

.display {
  font-family: var(--serif-en);
  font-weight: 300;
  letter-spacing: -0.01em;
  line-height: 0.98;
}
.display em {
  font-style: italic;
  font-weight: 300;
}

/* Selection */
::selection { background: var(--pink); color: var(--ink); }

/* Scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--ivory); }
::-webkit-scrollbar-thumb { background: var(--pink); border: 3px solid var(--ivory); border-radius: 10px; }

/* Containers */
.wrap { width: 100%; padding: 0 clamp(24px, 5vw, 80px); }
.wrap-wide { width: 100%; padding: 0 clamp(16px, 3vw, 48px); }

/* Fine rule */
.hairline { height: 1px; background: var(--line); width: 100%; }
.hairline-soft { height: 1px; background: var(--line-soft); width: 100%; }

/* Button styles */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 18px 36px;
  font-family: var(--serif-en);
  font-size: 14px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  border: 1px solid currentColor;
  transition: all 0.6s var(--ease-luxe);
  position: relative;
  overflow: hidden;
  font-weight: 400;
}
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--ink);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.6s var(--ease-luxe);
  z-index: -1;
}
.btn:hover { color: var(--ivory); }
.btn:hover::before { transform: scaleX(1); }

.btn-dark {
  background: var(--ink);
  color: var(--ivory);
  border-color: var(--ink);
}
.btn-dark::before { background: var(--pink-deep); }
.btn-dark:hover { color: var(--ink); border-color: var(--pink-deep); }

.btn-arrow::after {
  content: "→";
  display: inline-block;
  transition: transform 0.6s var(--ease-luxe);
}
.btn-arrow:hover::after { transform: translateX(6px); }

/* Reveal base */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity 1.2s var(--ease-luxe), transform 1.2s var(--ease-luxe); }
.reveal.in { opacity: 1; transform: none; }
.reveal-slow { transition-duration: 1.6s; }

.char-split span {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.6em);
  transition: opacity 0.9s var(--ease-luxe), transform 0.9s var(--ease-luxe);
}
.char-split.in span {
  opacity: 1;
  transform: none;
}