/* =====================================================================
   詐欺返金相談ナビ — Design Tokens
   YMYL（弁護士監修）メディア向け。深いネイビー基調 + 落ち着いたLINEグリーン。
   data-navy 属性で「ネイビーの効かせ方」(soft / base / deep) を切替可能。
   ===================================================================== */

:root {
  /* ---- Brand / semantic colors ---- */
  --color-primary:      #16263f;   /* 深いネイビー */
  --color-primary-700:  #1e3252;   /* やや明るいネイビー（境界・帯） */
  --color-primary-050:  #eef2f8;   /* ネイビーの極薄ティント */
  --color-secondary:    #2f6bb0;   /* 信頼感のあるブルー（リンク・補助） */
  --color-secondary-050:#e9f1fa;

  --color-accent:       #2e9e5b;   /* 落ち着いたLINEグリーン */
  --color-accent-600:   #268a4f;   /* ホバー */
  --color-accent-050:   #ecf6ef;

  --color-lawyer:       #b58a3c;   /* 監修バッジ（落ち着いたアンバー/ゴールド） */
  --color-lawyer-050:   #f7f0e1;

  --color-warning-bg:   #fbf3e0;   /* 薄いアンバー（注意ボックス背景） */
  --color-warning-bd:   #e7cf95;
  --color-danger:       #c0473d;   /* 控えめなレッド */

  --color-text:         #232b35;   /* チャコール */
  --color-text-soft:    #3c4654;
  --color-muted:        #6c7888;   /* グレーブルー */
  --color-line:         #e4e8ee;   /* 罫線・区切り */
  --color-line-soft:    #eef1f5;

  --color-bg:           #f5f7f9;   /* ほぼ白に近いグレー */
  --color-card:         #ffffff;

  /* ---- Typography ---- */
  --font-serif: "Noto Serif JP", "Hiragino Mincho ProN", serif;
  --font-sans:  "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;

  --fs-display: clamp(28px, 5.2vw, 46px);
  --fs-h1:      clamp(25px, 4.4vw, 36px);
  --fs-h2:      clamp(21px, 3vw, 28px);
  --fs-h3:      clamp(18px, 2.2vw, 21px);
  --fs-lead:    clamp(15px, 1.9vw, 18px);
  --fs-body:    16px;
  --fs-sm:      14px;
  --fs-xs:      12.5px;

  --lh-tight:   1.34;
  --lh-body:    1.85;   /* 本文は読みやすく広めの行間 */

  /* ---- Spacing scale (8px base) ---- */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px;
  --sp-12: 48px; --sp-16: 64px; --sp-20: 80px; --sp-24: 96px;

  /* ---- Radius ---- */
  --radius-card:   14px;
  --radius-button: 10px;
  --radius-pill:   999px;
  --radius-sm:     8px;

  /* ---- Shadow ---- */
  --shadow-card:   0 1px 2px rgba(22, 38, 63, .06), 0 6px 20px rgba(22, 38, 63, .07);
  --shadow-soft:   0 1px 2px rgba(22, 38, 63, .05), 0 2px 8px rgba(22, 38, 63, .05);
  --shadow-cta:    0 8px 22px rgba(46, 158, 91, .28);
  --shadow-pop:    0 12px 40px rgba(22, 38, 63, .16);

  /* ---- Layout ---- */
  --container-width: 1120px;
  --container-narrow: 760px;   /* 記事本文の読み幅 */
  --header-height: 68px;

  --ease: cubic-bezier(.22, .61, .36, 1);
}

/* ネイビーの効かせ方バリエーション（Tweaks: navy intensity） */
:root[data-navy="soft"]  { --color-primary: #25395a; --color-primary-700: #324a70; }
:root[data-navy="deep"]  { --color-primary: #0f1c30; --color-primary-700: #16263f; }

/* ---- Reset / base ---- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: hidden; }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
h1, h2, h3, h4 { font-family: var(--font-serif); font-weight: 700; line-height: var(--lh-tight); color: var(--color-primary); margin: 0; }
p { margin: 0; }
a { color: var(--color-secondary); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; display: block; }
button { font-family: inherit; cursor: pointer; }
ul, ol { margin: 0; }

.container { width: 100%; max-width: var(--container-width); margin-inline: auto; padding-inline: 20px; }
.container-narrow { max-width: var(--container-narrow); }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

:focus-visible { outline: 3px solid color-mix(in srgb, var(--color-secondary) 55%, white); outline-offset: 2px; border-radius: 4px; }