/* CSS Variables — wakouren.online quiet luxury accessories */

:root {
  /* Palette: ivory / charcoal / beige / muted burgundy */
  --kz-ivory: #f7f4ef;
  --kz-ivory-deep: #ebe4d8;
  --kz-paper: #faf8f4;
  --kz-beige: #d9cfc0;
  --kz-beige-soft: #e8dfd2;
  --kz-burgundy: #6b3a3a;
  --kz-burgundy-soft: #8a5555;
  --kz-burgundy-mute: rgba(107, 58, 58, 0.12);
  --kz-black: #141210;
  --kz-charcoal: #2c2824;
  --kz-ink: #1f1b17;
  --kz-muted: #7a7168;
  --kz-muted-soft: #a39a90;
  --kz-line: rgba(31, 27, 23, 0.12);
  --kz-line-strong: rgba(31, 27, 23, 0.22);
  --kz-overlay: rgba(20, 18, 16, 0.45);
  --kz-white: #ffffff;

  --color-bg: var(--kz-ivory);
  --color-bg-alt: var(--kz-ivory-deep);
  --color-text: var(--kz-ink);
  --color-text-muted: #5e564e;
  --color-text-inverse: var(--kz-white);
  --color-primary: var(--kz-charcoal);
  --color-accent: var(--kz-burgundy);

  /* Typography */
  --font-display: "Cormorant Garamond", "Shippori Mincho", "Times New Roman", serif;
  --font-jp: "Shippori Mincho", "Noto Serif JP", "Yu Mincho", serif;
  --font-sans: "Noto Sans JP", "Hiragino Sans", "Yu Gothic", sans-serif;
  --font-family-base: var(--font-sans);
  --font-family-heading: var(--font-jp);

  --font-size-base: 16px;
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-md: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.375rem;
  --font-size-2xl: clamp(1.85rem, 4.2vw, 2.75rem);
  --font-size-3xl: clamp(2.4rem, 6.5vw, 4rem);
  --font-size-hero: clamp(2.4rem, 6.8vw, 4.6rem);
  --line-height-base: 1.8;
  --line-height-tight: 1.25;
  --line-height-jp: 1.85;
  --letter-wide: 0.18em;
  --letter-brand: 0.32em;

  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-medium: 500;

  /* Spacing */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 4.5rem;
  --space-4xl: 6.5rem;

  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-pill: 999px;
  --header-h: 76px;

  --shadow-soft: 0 18px 50px rgba(20, 18, 16, 0.08);
  --shadow-lift: 0 28px 70px rgba(20, 18, 16, 0.14);
  --transition-fast: 180ms cubic-bezier(0.22, 1, 0.36, 1);
  --transition-base: 360ms cubic-bezier(0.22, 1, 0.36, 1);
  --transition-slow: 900ms cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);

  --container-sm: 680px;
  --container-md: 920px;
  --container-lg: 1120px;
  --container-xl: 1280px;
  --container-max: 1600px;
}