/* sites/shared/tokens.css — Day0 v2 design tokens.
 * Mirrors 信笾旅诗/tokens.js (template DESIGN.md). Single source for all
 * sites/* surfaces. Touch this file → run `node scripts/check-forbidden-copy.mjs --strict`
 * + `node --test sites/shared/*.test.mjs`.
 *
 * Naming: --color-* / --font-* / --duration-* / --ease-* are the v2 contract.
 * The legacy --lv-* aliases below stay until v1 sites/product is removed.
 */

:root {
  /* ── colour ───────────────────────────────────────────────────────── */
  --color-paper: #FAF6EC;
  --color-paper-2: #F7F1E4;
  --color-paper-3: #F0E9D6;
  --color-paper-cool: #F2ECDC;
  --color-ink: #2A2520;
  --color-ink-2: #6B5D4F;
  --color-ink-muted: #9A8B7A;
  --color-pine: #5D7063;
  --color-clay: #C4997A;
  --color-sea-1: #2A3A4A;
  --color-sea-2: #4A6070;
  --color-sea-3: #8AA0B0;
  --color-visit: #5D7585;
  --color-rule: rgba(42, 37, 32, 0.12);
  --color-rule-soft: rgba(42, 37, 32, 0.06);

  /* ── typography ───────────────────────────────────────────────────── */
  --font-serif: "Songti SC", "Noto Serif SC", "Source Han Serif SC", "Songti TC", Georgia, "Times New Roman", serif;
  --font-label: "Songti SC", "Noto Serif SC", Georgia, serif;

  /* ── motion ───────────────────────────────────────────────────────── */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-fast: cubic-bezier(0.4, 0, 1, 1);
  --ease-bob: ease-in-out;

  --duration-feedback: 200ms;
  --duration-object-short: 450ms;
  --duration-object-medium: 800ms;
  --duration-object-long: 1200ms;
  --duration-page-switch: 350ms;

  /* ── legacy --lv-* aliases (v1 sites/product still references these) */
  --lv-paper: var(--color-paper);
  --lv-paper-2: var(--color-paper-2);
  --lv-paper-3: var(--color-paper-3);
  --lv-ink: var(--color-ink);
  --lv-ink-2: var(--color-ink-2);
  --lv-ink-muted: var(--color-ink-muted);
  --lv-pine: var(--color-pine);
  --lv-clay: var(--color-clay);
  --lv-sea-1: #1a2632;
  --lv-sea-2: var(--color-sea-1);
  --lv-sea-3: var(--color-sea-2);
  --lv-rule: rgba(42, 37, 32, 0.16);
  --lv-rule-soft: rgba(42, 37, 32, 0.07);
  --lv-serif: var(--font-serif);
}

.lv-grain::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  mix-blend-mode: multiply;
  opacity: 0.48;
  background-image:
    radial-gradient(rgba(120, 95, 60, 0.06) 1px, transparent 1.2px),
    radial-gradient(rgba(80, 60, 40, 0.045) 1px, transparent 1.2px);
  background-size: 3px 3px, 7px 7px;
  background-position: 0 0, 1px 2px;
}

@keyframes lv-lighthouse-sweep {
  0%, 100% {
    transform: translate(-2px, -50%) rotate(-22deg);
  }

  50% {
    transform: translate(-2px, -50%) rotate(22deg);
  }
}

@keyframes lv-object-drift {
  0%, 100% {
    transform: translate3d(0, 0, 0) rotate(0deg);
  }

  50% {
    transform: translate3d(3px, -5px, 0) rotate(0.8deg);
  }
}

@keyframes lv-object-glow {
  0%, 100% {
    filter: drop-shadow(0 0 7px rgba(196, 153, 122, 0.22));
  }

  50% {
    filter: drop-shadow(0 0 18px rgba(196, 153, 122, 0.44));
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0s !important;
    scroll-behavior: auto !important;
  }
}