/* ============================================================
   variables.css
   サイト全体で使う「色」「フォント」「余白」などをまとめたファイルです。
   ここの数値を変えるだけで、サイト全体のデザインを一括で変更できます。
   ============================================================ */

:root {
  /* ---------- ブランドカラー ---------- */
  --color-black: #050608;          /* ベースの黒 */
  --color-black-soft: #0b0d12;     /* やや明るい黒（カード背景など） */
  --color-black-elevated: #12151c; /* さらに明るい黒（浮いた要素） */

  --color-tiffany: #78f7e8;        /* 鮮やかなティファニーブルー（メインアクセント） */
  --color-tiffany-strong: #00d9c8; /* 濃いめのティファニーブルー（ホバー等） */
  --color-tiffany-ice: #c9fff8;    /* 発光の中心に使う淡いティファニー */
  --color-tiffany-glow: rgba(67, 255, 236, 0.52); /* 発光・影用 */
  --color-tiffany-glow-strong: rgba(67, 255, 236, 0.82); /* 強い発光用 */

  --color-gold: #2ee6c4;           /* セカンドアクセント（ヒーローバッジのティファニーに寄せた明るいミントシアン） */
  --color-gold-light: #b3f5ec;     /* さらに明るいミント（グラデーション用） */
  --color-gold-glow: rgba(46, 230, 196, 0.35);

  --color-text: #f5f7fa;           /* 基本の文字色（白に近い） */
  --color-text-dim: #a7b0bd;       /* 薄いグレー文字（補足テキスト） */
  --color-text-faint: #6b7280;     /* さらに薄いグレー（キャプション等） */

  --color-border: rgba(255, 255, 255, 0.09);
  --color-border-strong: rgba(255, 255, 255, 0.18);

  --color-danger: #ff5470;
  --color-success: #6fe3a3;

  /* ---------- グラデーション ---------- */
  --gradient-tiffany-gold: linear-gradient(135deg, var(--color-tiffany) 0%, var(--color-gold) 100%);
  --gradient-hero: radial-gradient(circle at 20% 20%, rgba(129, 216, 208, 0.16), transparent 45%),
                    radial-gradient(circle at 80% 30%, rgba(212, 175, 55, 0.12), transparent 45%),
                    radial-gradient(circle at 50% 90%, rgba(129, 216, 208, 0.10), transparent 55%);

  /* ---------- ガラスモーフィズム ---------- */
  --glass-bg: rgba(255, 255, 255, 0.04);
  --glass-bg-strong: rgba(255, 255, 255, 0.07);
  --glass-border: rgba(255, 255, 255, 0.12);
  --glass-blur: blur(18px);

  /* ---------- フォント ---------- */
  --font-heading: "Exo 2", "Noto Sans JP", sans-serif; /* シャープだが滑らかな近未来感の見出し用 */
  --font-body: "Noto Sans JP", "Poppins", -apple-system, BlinkMacSystemFont, sans-serif; /* 本文用 */
  --font-accent: "Cormorant Garamond", "Noto Serif JP", serif; /* アーティストとしての芸術性を添えるセリフ体（作家の言葉・タグライン用） */

  /* ---------- 基本タイポグラフィ ---------- */
  --font-size-body: 1rem;
  --font-size-ui: 0.875rem;
  --font-size-caption: 0.75rem;

  /* ---------- 余白・角丸・影 ---------- */
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 28px;
  --radius-full: 999px;

  --shadow-soft: 0 20px 60px rgba(0, 0, 0, 0.45);
  --shadow-glow-tiffany: 0 0 10px var(--color-tiffany-glow-strong), 0 0 30px var(--color-tiffany-glow), 0 0 72px rgba(67, 255, 236, 0.24);
  --shadow-glow-gold: 0 0 40px var(--color-gold-glow);

  /* 追加の文字発光カラー */
  --color-gold-glow-strong: rgba(179, 245, 236, 0.78);
  --color-text-glow: rgba(245, 247, 250, 0.28);
  --color-danger-glow: rgba(255, 84, 112, 0.68);
  --color-success-glow: rgba(111, 227, 163, 0.62);
  --color-silver-glow: rgba(215, 224, 232, 0.38);

  /* グレー系を鮮やかなシルバーへ */
  --color-text-dim: #d7e0e8;
  --color-text-faint: #aebbc7;

  --container-width: 1240px;

  --transition-fast: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base: 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 0.8s cubic-bezier(0.16, 1, 0.3, 1);

  --z-header: 100;
  --z-modal: 300;
  --z-toast: 400;
}