/* ==============================================
   Anima WebUI - Design Tokens
   ============================================== */

:root {
  /* ── Colors: Dark Theme (default) ── */
  --bg-base: #0a0a0f;
  --bg-surface: #12121a;
  --bg-elevated: #1a1a26;
  --bg-hover: #22222f;
  --bg-input: #14141e;

  /* ── Accent ── */
  --accent-primary: #7c5bf5;
  --accent-primary-rgb: 124, 91, 245;
  --accent-secondary: #c084fc;
  --accent-tertiary: #38bdf8;
  --accent-glow: rgba(124, 91, 245, 0.25);
  --accent-glow-strong: rgba(124, 91, 245, 0.45);

  /* ── Gradient ── */
  --gradient-accent: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
  --gradient-subtle: linear-gradient(135deg, rgba(124, 91, 245, 0.1), rgba(192, 132, 252, 0.05));

  /* ── Text ── */
  --text-primary: #e8e8f0;
  --text-secondary: #9898b0;
  --text-muted: #5a5a72;
  --text-accent: var(--accent-secondary);

  /* ── Borders ── */
  --border-subtle: rgba(255, 255, 255, 0.06);
  --border-default: rgba(255, 255, 255, 0.1);
  --border-accent: rgba(124, 91, 245, 0.3);

  /* ── Status ── */
  --status-success: #34d399;
  --status-error: #f87171;
  --status-warning: #fbbf24;

  /* ── Typography ── */
  --font-sans: 'Inter', 'Noto Sans JP', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', monospace;

  /* ── Sizing ── */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;

  /* ── Shadows ── */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.4);
  --shadow-glow: 0 0 20px var(--accent-glow);

  /* ── Transitions ── */
  --transition-fast: 150ms ease;
  --transition-normal: 250ms ease;
  --transition-slow: 400ms cubic-bezier(0.4, 0, 0.2, 1);

  /* ── Theme-aware: overlay & scrollbar ── */
  --overlay-subtle: rgba(255, 255, 255, 0.04);
  --overlay-light: rgba(255, 255, 255, 0.08);
  --overlay-medium: rgba(255, 255, 255, 0.15);
  --overlay-strong: rgba(255, 255, 255, 0.25);
  --scrollbar-thumb: rgba(255, 255, 255, 0.08);
  --scrollbar-thumb-hover: rgba(255, 255, 255, 0.15);
  --scrollbar-thumb-active: rgba(255, 255, 255, 0.25);

  /* ── Theme-aware: section labels ── */
  --section-label-color: rgba(255, 255, 255, 0.75);
  --section-label-sub: rgba(255, 255, 255, 0.65);

  /* ── Theme-aware: gallery card text ── */
  --card-text: rgba(255, 255, 255, 0.85);
  --card-text-muted: rgba(255, 255, 255, 0.5);
  --card-badge-bg: rgba(255, 255, 255, 0.1);
  --card-badge-color: rgba(255, 255, 255, 0.7);

  /* ── Theme-aware: image backgrounds ── */
  --img-bg: #000;

  /* ── Theme-aware: select dropdown arrow color ── */
  --select-arrow-color: %239898b0;
}

/* ==============================================
   Light Theme
   ============================================== */
[data-theme="light"] {
  /* ── Background (ウォーム系オフホワイト。純白を避ける) ── */
  --bg-base: #f3f3f0;
  --bg-surface: #f9f9f7;
  --bg-elevated: #f5f5f2;
  --bg-hover: #ededea;
  --bg-input: #f0f0ed;

  /* ── Accent (A1111風ウォームオレンジ) ── */
  --accent-primary: #e8985a;
  --accent-primary-rgb: 232, 152, 90;
  --accent-secondary: #d88a4e;
  --accent-tertiary: #c07838;
  --accent-glow: rgba(232, 152, 90, 0.12);
  --accent-glow-strong: rgba(232, 152, 90, 0.22);

  /* ── Gradient ── */
  --gradient-accent: linear-gradient(135deg, #f0a050, #e8985a);
  --gradient-subtle: linear-gradient(135deg, rgba(232, 152, 90, 0.05), rgba(216, 138, 78, 0.02));

  /* ── Text (純黒ではなくソフトなダーク) ── */
  --text-primary: #2d2d3a;
  --text-secondary: #5c5c72;
  --text-muted: #9090a0;

  /* ── Borders ── */
  --border-subtle: rgba(0, 0, 0, 0.06);
  --border-default: rgba(0, 0, 0, 0.12);
  --border-accent: rgba(108, 71, 230, 0.25);

  /* ── Status (少し濃いめに) ── */
  --status-success: #22c55e;
  --status-error: #ef4444;
  --status-warning: #f59e0b;

  /* ── Shadows ── */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.12);

  /* ── Theme-aware: overlay & scrollbar ── */
  --overlay-subtle: rgba(0, 0, 0, 0.03);
  --overlay-light: rgba(0, 0, 0, 0.05);
  --overlay-medium: rgba(0, 0, 0, 0.08);
  --overlay-strong: rgba(0, 0, 0, 0.12);
  --scrollbar-thumb: rgba(0, 0, 0, 0.1);
  --scrollbar-thumb-hover: rgba(0, 0, 0, 0.18);
  --scrollbar-thumb-active: rgba(0, 0, 0, 0.28);

  /* ── Theme-aware: section labels ── */
  --section-label-color: rgba(0, 0, 0, 0.7);
  --section-label-sub: rgba(0, 0, 0, 0.55);

  /* ── Theme-aware: gallery card text ── */
  --card-text: rgba(255, 255, 255, 0.9);
  --card-text-muted: rgba(255, 255, 255, 0.6);
  --card-badge-bg: rgba(0, 0, 0, 0.08);
  --card-badge-color: rgba(0, 0, 0, 0.6);

  /* ── Theme-aware: image backgrounds ── */
  --img-bg: #e8e8ed;

  /* ── Theme-aware: select dropdown arrow color ── */
  --select-arrow-color: %234a4a6a;
}

/* ── Theme transition ── */
html[data-theme-transitioning] * {
  transition: background-color 0.3s ease,
    color 0.3s ease,
    border-color 0.3s ease,
    box-shadow 0.3s ease !important;
}