/* ========================================
   Design Tokens: futanari-heaven (Light Mode)
   White + Blue-Shifted Grey + Lime #bcfb86 + Amber #f59e0b
   Reference: Trip Builder UI
   ======================================== */
: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: Soft Amber (links, genre tags, secondary CTA) */
  --color-link: #f59e0b;
  --color-link-hover: #d97706;

  /* 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(245, 158, 11, 0.10);

  /* Tags: genre uses sub-color (amber) */
  --color-tag-bg: rgba(245, 158, 11, 0.08);
  --color-tag-border: rgba(245, 158, 11, 0.22);

  /* 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;
}