/* =========================================================
   CSS CUSTOM PROPERTIES
   ========================================================= */
:root {
  --clr-bg:           #faf8f4;
  --clr-bg-warm:      #f5f1ea;
  --clr-surface:      #ffffff;
  --clr-surface-warm: #fdf9f3;
  --clr-dark:         #1a1410;
  --clr-dark-soft:    #2c2420;
  --clr-border:       #e8e0d2;
  --clr-border-light: #f0ebe0;
  --clr-gold:         #c9a84c;
  --clr-gold-light:   #e8c97a;
  --clr-gold-pale:    #fdf3e0;
  --clr-gold-border:  #e8d4a0;
  --clr-crimson:      #8b1a2a;
  --clr-crimson-soft: #a82236;
  --clr-text:         #1a1410;
  --clr-text-mid:     #4a3c2c;
  --clr-text-muted:   #6b5c45;
  --clr-text-faint:   #a89878;
  --clr-white:        #ffffff;

  --font-display: 'Cormorant Garamond', 'IM Fell English', Georgia, serif;
  --font-body:    'Cormorant Garamond', 'Noto Serif JP', Georgia, serif;
  --font-ui:      'Noto Sans JP', sans-serif;
  --font-label:   'Cormorant SC', 'Cormorant Garamond', serif;

  --space-xs:  0.5rem;
  --space-sm:  1rem;
  --space-md:  2rem;
  --space-lg:  4rem;
  --space-xl:  8rem;

  --transition-fast:  150ms ease;
  --transition-mid:   300ms ease;
  --transition-slow:  600ms ease;

  --container-max:    1200px;
  --container-narrow: 800px;

  --shadow-card: 0 2px 12px rgba(26,20,16,0.06), 0 1px 3px rgba(26,20,16,0.04);
  --shadow-hover: 0 8px 32px rgba(26,20,16,0.1), 0 2px 8px rgba(26,20,16,0.06);
}

.lang-ja {
  --font-display: 'Noto Serif JP', serif;
  --font-body: 'Noto Serif JP', serif;
  --font-ui: 'Noto Sans JP', sans-serif;
  --font-label: 'Noto Serif JP', serif;
}