/* =====================================================
   mindas. — root.css
   UI: Charcoal × Purple (Logo brown は --color-logo-brown としてアクセント保持)
   ===================================================== */

:root {
  /* ── Font Family ─────────────────────────────────── */
  --font-jp: "Noto Sans JP", system-ui, -apple-system, sans-serif;
  --font-en: "Inter", system-ui, -apple-system, sans-serif;

  /* ── Font Size Scale ─────────────────────────────── */
  --fs-2xs: 0.65rem;   /* 極小ラベル・バッジ */
  --fs-xs:  0.75rem;   /* キャプション・タグ */
  --fs-sm:  0.85rem;   /* サブテキスト・注釈 */
  --fs-base:0.95rem;   /* 本文・説明 */
  --fs-md:  1.05rem;   /* 強調本文・リードテキスト */
  --fs-lg:  1.25rem;   /* 小見出し */
  --fs-xl:  1.5rem;    /* 中見出し */
  --fs-2xl: 2rem;      /* 大見出し */

  /* ── Color — UI: Charcoal × Purple ── */
  --color-white:        #FFFFFF;
  --color-ivory:        #FFFDF8;
  --color-gray:         #F7F9FE;
  --color-border:       #E5E7EC;

  /* Base — UIは濃いグレー基調（旧: ロゴのブラウンを土台にしていた） */
  --color-primary:      #34383F;
  --color-primary-dark: #252932;

  /* Logo accent — ロゴ・キャッチコピー・ごく一部の情緒的強調にだけ使う */
  --color-logo-brown:   #504838;

  /* Main action — ロゴのパープル */
  --color-accent-blue:      #5860A8;
  --color-accent-blue-soft: #F0F1FA;

  /* Cool neutral background */
  --color-mist-blue:      #DDE8FA;
  --color-mist-blue-soft: #F2F6FD;

  /* Night sky gradient steps (hero / KV shared) */
  --color-navy-deep:   #1A2E6C;
  --color-navy-mid:    #2E50A0;
  --color-steel-blue:  #6688C0;
  --color-pale-blue:   #C8D8F0;
  --color-sky-blue:    #5B9EF0;

  /* Gender-neutral accent — コラム識別色（少し落ち着かせる） */
  --color-teal:      #3F8F86;
  --color-teal-soft: #EAF6F3;

  /* Mystical accent — パープル寄りに深める */
  --color-lavender:      #7467C7;
  --color-lavender-soft: #F3F1FF;
  /* 性格診断・神秘系サーフェス（旧 beige/brown を置換。ラベンダー系で統一） */
  --color-lavender-deep:   #5B4FA0;  /* 強調テキスト・ボーダー（旧 #c07940 ブラウン） */
  --color-lavender-text:   #5B5570;  /* やわらかい強調本文（旧 #8a6038 ブラウン） */
  --color-lavender-border: #E4E0F5;  /* やわらかいボーダー（旧 #ece4d6 ベージュ） */

  /* Warm accent — ロゴのゴールド */
  --color-warm-yellow:      #E8B040;
  --color-warm-yellow-soft: #FFF7DF;

  /* Romance / soft emotion — 少しくすませて浮きを抑える */
  --color-rose:      #C988A2;
  --color-rose-soft: #FBF0F4;

  /* Legacy mint alias */
  --color-mint: var(--color-teal);

  --text-main:    #34383F;  /* 見出し・強調（チャコール基調）*/
  --text-body:    #4F5665;  /* 本文（青みグレー、長文の読みやすさを優先）*/
  --text-sub:     #70757D;
  --text-muted:   #8A8F98;  /* 補足・メタ用 */

  /* ── Radius ─────────────────────────────────────── */
  --radius-xs:   4px;   /* 微小: タグ・プログレスバー・極小マーカー */
  --radius-sm:   10px;
  --radius-md:   16px;
  --radius-lg:   24px;
  --radius-pill: 999px;

  /* ── Border ──────────────────────────────────────── */
  --border-thin:   1px;
  --border-medium: 1.5px;
  --border-bold:   2px;
  --border-color:           var(--color-border);
  --border-color-light:     rgba(229, 231, 236, 0.6);  /* --color-border (#E5E7EC) を 0.6 で */
  --border-color-accent:    rgba(88, 96, 168, 0.18);   /* --color-accent-blue (#5860A8) を 0.18 で */

  /* ── Shadow ─────────────────────────────────────── */
  --shadow-card: 0 4px 12px rgba(36, 54, 95, 0.07);
  --shadow-soft: 0 6px 20px rgba(63, 103, 216, 0.10);

  /* ── Legacy variable aliases (style.css compatibility) ── */
  /* Brand */
  --clr-brand:       var(--color-accent-blue);
  --clr-brand-dark:  var(--color-primary);
  --clr-brand-light: var(--color-accent-blue-soft);
  --clr-footer-bg:   #171A35;  /* 深い藍。.site-footer の実装値と一致 */

  /* Purple — mystical accent only */
  --clr-purple:       var(--color-lavender);
  --clr-purple-light: var(--color-lavender-soft);

  /* Pink — romance / soft emotion only */
  --clr-pink:         var(--color-rose);
  --clr-pink-light:   var(--color-rose-soft);

  /* Yellow (fortune) */
  --clr-yellow:       var(--color-warm-yellow);
  --clr-yellow-light: var(--color-warm-yellow-soft);
  --clr-fortune:      var(--color-warm-yellow);

  /* Blue (quiz) */
  --clr-quiz:       var(--color-accent-blue);
  --clr-quiz-light: var(--color-accent-blue-soft);

  /* Teal (column) */
  --clr-column:       var(--color-teal);
  --clr-column-light: var(--color-teal-soft);

  /* Orange */
  --clr-orange: #F6A335;

  /* Backgrounds */
  --clr-bg-warm:  var(--color-ivory);
  --clr-bg-blue:  var(--color-mist-blue-soft);
  --clr-bg-green: var(--color-teal-soft);

  /* Text */
  --clr-text:       var(--text-main);  /* 見出し・強調用（濃紺）*/
  --clr-text-body:  var(--text-body);  /* 本文用（青みグレー） */
  --clr-text-muted: var(--text-sub);
  --clr-bg:         var(--color-gray);
  --clr-white:      var(--color-white);
  --clr-card:       var(--color-white);
  --clr-border:     var(--color-border);

  /* ── Spacing ─────────────────────────────────────── */
  --sp-2xs: 4px;
  --sp-xs:  8px;
  --sp-sm:  16px;
  --sp-md:  24px;
  --sp-lg:  48px;
  --sp-xl:  80px;
  --sp-2xl: 112px;

  /* ── Container ───────────────────────────────────── */
  --container-w: 1200px;
  --sidebar-w:   300px;
  --gutter:      clamp(20px, 4vw, 48px);

  /* ── Radius (legacy) ─────────────────────────────── */
  --r-xs:   var(--radius-xs);
  --r-sm:   var(--radius-sm);
  --r-md:   var(--radius-md);
  --r-lg:   var(--radius-lg);
  --r-full: var(--radius-pill);

  /* ── Shadow (全スケール、navy ベースで統一) ─────────────
   * 青みの強い影は派手に見えやすいので、ネイビーグレーに寄せて落ち着いた質感に。
   * --shadow-hover はカード一覧で多用しても "テンプレ感" が出ないトーンへ。 */
  --shadow-xs:    0 2px 8px  rgba(36, 54, 95, 0.05);
  --shadow-sm:    0 4px 12px rgba(36, 54, 95, 0.07);
  --shadow-md:    0 8px 24px rgba(36, 54, 95, 0.09);
  --shadow-lg:    0 10px 26px rgba(36, 54, 95, 0.10);
  --shadow-xl:    0 12px 32px rgba(36, 54, 95, 0.12);
  --shadow-hover: 0 10px 26px rgba(36, 54, 95, 0.10);

  /* ── Transition ──────────────────────────────────── */
  --tr: 0.2s ease;

  /* ── Header / Nav heights ────────────────────────── */
  --header-h:     96px;
  --bottom-nav-h: 88px;
}