/* ============================================
   Monogatari — Design Tokens
   「禁断の図書館」テーマ
   ============================================ */

:root {
  /* ── 闇のカラーパレット ── */
  --color-void:          #0a0604;
  --color-abyss:         #110b07;
  --color-deep-dark:     #1a0f0a;
  --color-dark-wood:     #2d1810;
  --color-wood:          #3d2317;
  --color-warm-wood:     #4a2c1c;
  --color-leather:       #5c3a24;

  /* ── 金箔・琥珀系アクセント ── */
  --color-gold:          #d4a853;
  --color-gold-bright:   #f0c86e;
  --color-gold-dim:      #b8923e;
  --color-amber:         #c9956b;
  --color-copper:        #b87333;
  --color-bronze:        #8b6914;

  /* ── 発光・魔法系 ── */
  --color-lantern:       #ff9f43;
  --color-lantern-glow:  rgba(255, 159, 67, 0.15);
  --color-flame:         #e8651a;
  --color-mystic:        #4ecdc4;
  --color-mystic-dim:    #2a7a74;
  --color-phantom:       #7c3aed;

  /* ── テキスト ── */
  --color-text-primary:  #f0e6d3;
  --color-text-secondary:#c4b49a;
  --color-text-muted:    #8b7355;
  --color-text-gold:     #d4a853;

  /* ── ボーダー・区切り ── */
  --color-border:        rgba(212, 168, 83, 0.15);
  --color-border-bright: rgba(212, 168, 83, 0.35);
  --color-border-subtle: rgba(139, 115, 85, 0.2);

  /* ── グラス・オーバーレイ ── */
  --glass-bg:            rgba(26, 15, 10, 0.75);
  --glass-bg-deep:       rgba(10, 6, 4, 0.85);
  --glass-bg-light:      rgba(45, 24, 16, 0.6);
  --glass-blur:          20px;

  /* ── シャドウ ── */
  --shadow-sm:           0 2px 8px rgba(0, 0, 0, 0.3);
  --shadow-md:           0 4px 16px rgba(0, 0, 0, 0.4);
  --shadow-lg:           0 8px 32px rgba(0, 0, 0, 0.5);
  --shadow-xl:           0 16px 48px rgba(0, 0, 0, 0.6);
  --shadow-glow:         0 0 20px rgba(212, 168, 83, 0.2);
  --shadow-glow-strong:  0 0 40px rgba(212, 168, 83, 0.35);
  --shadow-lantern:      0 0 60px rgba(255, 159, 67, 0.15);

  /* ── フォント ── */
  --font-display:        'Cinzel Decorative', 'Cinzel', serif;
  --font-heading:        'Cinzel', serif;
  --font-body:           'Noto Serif JP', 'Georgia', serif;
  --font-ui:             'Inter', 'Noto Sans JP', sans-serif;

  /* ── フォントサイズ ── */
  --text-xs:             0.75rem;
  --text-sm:             0.875rem;
  --text-base:           1rem;
  --text-lg:             1.125rem;
  --text-xl:             1.25rem;
  --text-2xl:            1.5rem;
  --text-3xl:            1.875rem;
  --text-4xl:            2.25rem;
  --text-5xl:            3rem;
  --text-6xl:            3.75rem;
  --text-hero:           clamp(2.5rem, 6vw, 5rem);

  /* ── スペーシング ── */
  --space-xs:            0.25rem;
  --space-sm:            0.5rem;
  --space-md:            1rem;
  --space-lg:            1.5rem;
  --space-xl:            2rem;
  --space-2xl:           3rem;
  --space-3xl:           4rem;
  --space-4xl:           6rem;
  --space-5xl:           8rem;

  /* ── ボーダーラジウス ── */
  --radius-sm:           4px;
  --radius-md:           8px;
  --radius-lg:           12px;
  --radius-xl:           16px;
  --radius-2xl:          24px;
  --radius-full:         9999px;

  /* ── トランジション ── */
  --transition-fast:     150ms ease;
  --transition-base:     300ms ease;
  --transition-slow:     500ms ease;
  --transition-dramatic: 800ms cubic-bezier(0.4, 0, 0.2, 1);

  /* ── z-index ── */
  --z-behind:            -1;
  --z-base:              1;
  --z-dropdown:          100;
  --z-sticky:            200;
  --z-nav:               300;
  --z-modal-backdrop:    400;
  --z-modal:             500;
  --z-notification:      600;
  --z-particles:         50;

  /* ── コンテナ ── */
  --container-sm:        640px;
  --container-md:        768px;
  --container-lg:        1024px;
  --container-xl:        1200px;
  --container-2xl:       1400px;

  /* ── テクスチャパターン（CSS生成） ── */
  --texture-grain:       url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.04'/%3E%3C/svg%3E");
}