/* ==========================================================================
   base.css — design tokens, reset, typography
   Spec: docs/2026-10-11_221500 §6 §7
     · 100svh/100dvh only, never 100vh (iOS URL-bar drift)
     · copy sits on solid panels — sparkly backgrounds are garnish, never the text bed
     · WCAG AA 4.5:1 for body copy
   ========================================================================== */

:root {
  /* palette — blush / rose / cream / gold */
  --c-blush:      #f7d9e8;
  --c-blush-deep: #f2bcd4;
  --c-rose:       #d96a92;
  --c-rose-deep:  #a83c66;

  /* ---- tokens referenced by components/vn/mobile but never declared.
     An undefined var() makes the whole declaration invalid at computed-value
     time, so e.g. the dialogue badge silently became transparent white-on-white
     and the hover colours vanished. Declared here once, used everywhere. --- */
  --c-brand-pri:  #d9467e;   /* primary brand pink: buttons, badge, accents */
  --c-text-1:     #4a2136;   /* body copy */
  --c-text-2:     #8a5f76;   /* secondary / meta copy */
  --s-8:          3.25rem;   /* spacing scale step above --s-7 */
  --charm-mx:     14%;       /* mobile hidden-bell x position */

  --c-cream:      #fff7fa;
  --c-paper:      #fffdfd;
  --c-gold:       #c99a53;
  --c-gold-light: #f0d3a0;
  --c-ink:        #3b2233;
  --c-ink-soft:   #6b4a5e;
  --c-night:      #2b1830;

  /* type */
  --f-display: "Hiragino Maru Gothic ProN", "Hiragino Sans", "Hiragino Sans GB",
               "Yu Gothic", "AppleSDGothicNeo", system-ui, sans-serif;
  --f-body:    "Hiragino Sans", "Hiragino Sans GB", "Yu Gothic",
               "AppleSDGothicNeo", system-ui, -apple-system, sans-serif;

  /* scale (fluid) */
  --t-hero:  clamp(1.95rem, 4.1vw, 3.4rem);   /* sized to keep the whole
                                                    home section on one 16:9 */
  --t-h2:    clamp(1.35rem, 3.4vw, 2.1rem);
  --t-lead:  clamp(1.05rem, 2.4vw, 1.45rem);
  --t-body:  clamp(1rem, 1.6vw, 1.125rem);
  --t-small: 0.875rem;

  /* space */
  --s-1: .25rem; --s-2: .5rem; --s-3: .875rem; --s-4: 1.25rem;
  --s-5: 1.75rem; --s-6: 2.5rem; --s-7: 3.5rem;

  /* shape */
  --r-sm: 10px; --r-md: 18px; --r-lg: 28px; --r-pill: 999px;

  /* elevation */
  --sh-panel: 0 18px 44px -18px rgba(120, 40, 80, .34), 0 2px 0 rgba(255,255,255,.75) inset;
  --sh-soft:  0 8px 24px -12px rgba(120, 40, 80, .30);

  /* motion */
  --ease-out: cubic-bezier(.22, .61, .36, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --dur: .42s;

  --hud-h: 62px;
}

/* ---------------------------------------------------------------- reset -- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  background: var(--c-night);
}

body {
  min-height: 100svh;
  font-family: var(--f-body);
  font-size: var(--t-body);
  line-height: 1.85;
  color: var(--c-ink);
  background: var(--c-cream);
  overflow-x: hidden;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

img, canvas, svg, video { display: block; max-width: 100%; height: auto; }
img { object-fit: cover; }

button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; }

ul, ol { list-style: none; padding: 0; }
a { color: inherit; }

h1, h2, h3, h4 {
  font-family: var(--f-display);
  line-height: 1.32;
  letter-spacing: .015em;
  font-weight: 700;
  text-wrap: balance;
}

h1 { font-size: var(--t-hero); }
h2 { font-size: var(--t-h2); }
h3 { font-size: clamp(1.15rem, 2.2vw, 1.45rem); }

p { text-wrap: pretty; }

/* --------------------------------------------------------- a11y helpers -- */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

.skip-link {
  position: fixed; top: -100%; left: var(--s-3); z-index: 200;
  padding: var(--s-3) var(--s-4);
  background: var(--c-rose-deep); color: #fff;
  border-radius: 0 0 var(--r-sm) var(--r-sm);
  font-weight: 700; text-decoration: none;
  transition: top var(--dur) var(--ease-out);
}
.skip-link:focus-visible { top: 0; }

:where(a, button, [tabindex]):focus-visible {
  outline: 3px solid var(--c-rose-deep);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}

/* -------------------------------------------------------------- rhythm --- */
.eyebrow {
  font-size: var(--t-small);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--c-rose-deep);
  font-weight: 700;
}

.romaji {
  font-family: var(--f-body);
  font-size: var(--t-small);
  letter-spacing: .16em;
  color: var(--c-ink-soft);
  font-style: italic;
  margin-top: calc(var(--s-1) * -1);
}

.lead { font-size: var(--t-lead); line-height: 1.75; }

.meta {
  font-size: var(--t-small);
  color: var(--c-ink-soft);
  letter-spacing: .04em;
}

.noscript {
  padding: var(--s-4);
  background: var(--c-gold-light);
  color: var(--c-night);
  text-align: center;
  font-weight: 700;
}

/* --------------------------------------------- reduced motion / privacy -- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}
@media (prefers-reduced-transparency: reduce) {
  .panel { background: var(--c-paper) !important; }
}
@media (prefers-contrast: more) {
  :root { --c-ink: #1c0f18; --c-ink-soft: #3b2233; }
}