:root {
  color-scheme: dark;

  /* Typography */
  --font-display: "Cormorant Garamond", "Noto Serif TC", "Noto Serif JP", serif;
  --font-serif-tc: "Noto Serif TC", "Noto Serif JP", "Source Han Serif TC", serif;
  --font-serif-jp: "Noto Serif JP", "Noto Serif TC", "Source Han Serif JP", serif;
  --font-body: "Noto Serif TC", "Noto Serif JP", "Cormorant Garamond", serif;
  --font-ui: "Noto Serif TC", "Noto Serif JP", system-ui, sans-serif;

  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-md: 1.0625rem;
  --text-lg: 1.25rem;
  --text-xl: 1.5rem;
  --text-2xl: 2rem;
  --text-3xl: 2.625rem;
  --text-4xl: 3.25rem;

  --leading-tight: 1.12;
  --leading-title: 1.22;
  --leading-body: 1.85;
  --tracking-none: 0;
  --tracking-kana: 0.08em;
  --tracking-caps: 0.12em;

  /* Core palette: dark wafuu + jewel gold */
  --color-bg-0: #050505;
  --color-bg-1: #0a0908;
  --color-bg-2: #12100e;
  --color-bg-3: #1b1714;

  --color-surface-0: rgba(10, 9, 8, 0.86);
  --color-surface-1: rgba(18, 16, 14, 0.82);
  --color-surface-2: rgba(31, 27, 23, 0.78);
  --color-surface-hover: rgba(42, 36, 30, 0.84);

  --color-text-strong: #f5efe5;
  --color-text-main: #e3d8c8;
  --color-text-soft: #b9aa96;
  --color-text-muted: #847968;
  --color-text-disabled: #5c5449;

  --color-gold-50: #fff6dc;
  --color-gold-100: #f3dfb1;
  --color-gold-200: #dfbd78;
  --color-gold-300: #c99b48;
  --color-gold-400: #a9792e;
  --color-gold-500: #75501f;
  --color-gold-600: #3d2912;

  --color-jewel: #1f8a68;
  --color-jewel-soft: #63d4b2;
  --color-jewel-dark: #082f28;
  --color-ruby: #8f2437;
  --color-ruby-soft: #d95d73;
  --color-ink-blue: #101a24;
  --color-indigo-glow: #6c78ff;

  --color-hairline-gold: rgba(223, 189, 120, 0.38);
  --color-hairline-soft: rgba(245, 239, 229, 0.12);
  --color-hairline-quiet: rgba(245, 239, 229, 0.07);
  --color-focus: rgba(99, 212, 178, 0.82);

  /* Gradients and textures */
  --gradient-page:
    radial-gradient(circle at 18% 8%, rgba(117, 80, 31, 0.22), transparent 30rem),
    radial-gradient(circle at 78% 12%, rgba(31, 138, 104, 0.12), transparent 28rem),
    linear-gradient(180deg, #050505 0%, #0a0908 44%, #12100e 100%);
  --gradient-card:
    linear-gradient(145deg, rgba(31, 27, 23, 0.74), rgba(10, 9, 8, 0.62));
  --gradient-card-hover:
    linear-gradient(145deg, rgba(42, 36, 30, 0.84), rgba(14, 12, 10, 0.68));
  --gradient-gold-line:
    linear-gradient(90deg, transparent 0%, rgba(223, 189, 120, 0.18) 12%, rgba(255, 246, 220, 0.74) 52%, rgba(117, 80, 31, 0.16) 88%, transparent 100%);
  --gradient-jewel-gold:
    linear-gradient(135deg, #fff6dc 0%, #dfbd78 32%, #a9792e 62%, #63d4b2 100%);

  /* Spacing */
  --space-0: 0;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;

  --container-xs: 42rem;
  --container-sm: 56rem;
  --container-md: 72rem;
  --container-lg: 88rem;
  --container-pad-mobile: 1rem;
  --container-pad-tablet: 1.5rem;
  --container-pad-desktop: 2rem;

  /* Radius */
  --radius-xs: 3px;
  --radius-sm: 5px;
  --radius-md: 8px;
  --radius-card: 8px;
  --radius-pill: 999px;

  /* Borders and hairlines */
  --line-quiet: 1px solid var(--color-hairline-quiet);
  --line-soft: 1px solid var(--color-hairline-soft);
  --line-gold: 1px solid var(--color-hairline-gold);
  --line-gold-strong: 1px solid rgba(243, 223, 177, 0.52);
  --hairline-width: 1px;

  /* Shadows */
  --shadow-sm: 0 8px 24px rgba(0, 0, 0, 0.32);
  --shadow-md: 0 18px 52px rgba(0, 0, 0, 0.42);
  --shadow-lg: 0 32px 90px rgba(0, 0, 0, 0.54);
  --shadow-gold-glow: 0 0 0 1px rgba(223, 189, 120, 0.16), 0 18px 42px rgba(117, 80, 31, 0.2);
  --shadow-jewel-glow: 0 0 34px rgba(31, 138, 104, 0.22);

  /* Motion */
  --ease-luxury: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-soft-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-hover: cubic-bezier(0.2, 0.8, 0.2, 1);
  --duration-fast: 160ms;
  --duration-hover: 360ms;
  --duration-panel: 520ms;
  --duration-enter: 820ms;
  --duration-hero: 1100ms;

  /* Layout primitives */
  --nav-height: 4rem;
  --section-gap-mobile: 4rem;
  --section-gap-desktop: 7rem;
  --card-pad-mobile: 1rem;
  --card-pad-desktop: 1.25rem;
  --character-card-aspect: 3 / 4.28;
  --character-portrait-overhang: 9%;
  --character-card-min-h: 25rem;

  /* Components */
  --button-height-sm: 2.25rem;
  --button-height-md: 2.75rem;
  --button-pad-x: 1rem;
  --button-bg: rgba(18, 16, 14, 0.72);
  --button-bg-hover: rgba(42, 36, 30, 0.9);
  --button-text: var(--color-text-main);
  --button-text-hover: var(--color-gold-50);

  --seal-size: 2.75rem;
  --seal-bg: rgba(143, 36, 55, 0.88);
  --seal-bg-hover: rgba(217, 93, 115, 0.92);
  --seal-ink: #fff1df;

  --og-width: 1200px;
  --og-height: 630px;
}

@media (max-width: 767px) {
  :root {
    --text-3xl: 2.25rem;
    --text-4xl: 2.65rem;
    --leading-body: 1.78;
    --character-card-min-h: 23rem;
    --character-portrait-overhang: 12%;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 1ms;
    --duration-hover: 1ms;
    --duration-panel: 1ms;
    --duration-enter: 1ms;
    --duration-hero: 1ms;
  }
}

/* Suggested utility hooks for Zenith */
.kuei-page-shell {
  min-height: 100dvh;
  background: var(--gradient-page);
  color: var(--color-text-main);
  font-family: var(--font-body);
}

.kuei-gold-hairline {
  height: var(--hairline-width);
  background: var(--gradient-gold-line);
}

.kuei-luxury-enter {
  opacity: 0;
  transform: translateY(18px);
  animation: kuei-luxury-enter var(--duration-enter) var(--ease-luxury) forwards;
}

@keyframes kuei-luxury-enter {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}