/* ========================================
   Design Tokens: ishukan-heaven (Light Mode)
   White + Blue-Shifted Grey + Lime #bcfb86 + Forest Green #16a34a
   ======================================== */
:root {
  /* Color: Light Mode — White bg, blue-shifted greys */
  --color-bg: #ffffff;
  --color-surface: #f8f9fc;
  --color-surface-hover: #f0f2f7;
  --color-border: #e0e4ed;
  --color-text: #1a1e2e;
  --color-text-muted: #6b7190;

  /* Accent: Lime Green (CTA, character tags, review border) */
  --color-accent: #bcfb86;
  --color-accent-hover: #a3e86e;
  --color-accent-dim: rgba(188, 251, 134, 0.12);
  --color-accent-bg: rgba(188, 251, 134, 0.15);
  --color-accent-bg-hover: rgba(188, 251, 134, 0.25);
  --color-accent-border: rgba(188, 251, 134, 0.40);
  --color-accent-surface: #f0fce4;
  --color-accent-text: #1a1e2e;

  /* Site Title: Pill style */
  --site-title-size: var(--font-size-sm);
  --site-title-color: var(--color-cta-text);
  --site-title-bg: var(--color-accent);
  --site-title-padding: 0.25em 0.75em;
  --site-title-radius: 999px;
  --site-title-hover-color: var(--color-cta-text);
  --site-title-hover-bg: var(--color-accent-hover);

  /* Link / Sub: Forest Green (links, genre tags, secondary CTA) */
  --color-link: #16a34a;
  --color-link-hover: #15803d;

  /* CTA */
  --color-cta: #bcfb86;
  --color-cta-hover: #a3e86e;
  --color-cta-text: #1a2e00;

  /* Glow (light mode — subtle) */
  --color-glow: rgba(188, 251, 134, 0.12);
  --color-glow-link: rgba(22, 163, 74, 0.10);

  /* Tags: genre uses sub-color (forest green) */
  --color-tag-bg: rgba(22, 163, 74, 0.08);
  --color-tag-border: rgba(22, 163, 74, 0.22);

  /* Fire Badge (light mode — dark glass backdrop) */
  --fire-1-bg: rgba(0, 0, 0, 0.55);
  --fire-1-color: #fb923c;
  --fire-1-border: rgba(251, 146, 60, 0.4);
  --fire-blur: blur(4px);
  --fire-2-bg: rgba(0, 0, 0, 0.6);
  --fire-2-color: #fbbf24;
  --fire-2-border: rgba(251, 146, 60, 0.5);
  --fire-2-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
  --fire-3-bg: rgba(0, 0, 0, 0.65);
  --fire-3-color: #fef08a;
  --fire-3-border: rgba(251, 146, 60, 0.6);
  --fire-pulse-rest: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 6px rgba(251, 146, 60, 0.2);
  --fire-pulse-peak: 0 2px 8px rgba(0, 0, 0, 0.4), 0 0 12px rgba(251, 146, 60, 0.5);

  /* Overlays & Glass (light mode) */
  --color-overlay: rgba(0, 0, 0, 0.50);
  --color-overlay-heavy: rgba(0, 0, 0, 0.70);
  --color-overlay-modal: rgba(0, 0, 0, 0.4);
  --color-surface-gradient: rgba(248, 249, 252, 0.95);
  --color-surface-glass: rgba(255, 255, 255, 0.80);

  /* Typography */
  --font-sans: -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
  --font-size-base: 16px;
  --font-size-sm: 0.875rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.5rem;
  --font-size-2xl: 2rem;

  /* Spacing */
  --spacing-xs: 0.25rem;
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --spacing-lg: 1.5rem;
  --spacing-xl: 2rem;
  --spacing-2xl: 3rem;

  /* Radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;

  /* Layout */
  --container-width: 1140px;
  --container-wide: 1140px;
  --article-width: 800px;
}