/**
 * default.css — テーマA「ベーシック」
 * 白×グリーン × Noto Sans JP × 角張り控えめ
 *
 * 構成:
 *   1. 既存トークン（--c-*, --radius-*, --font-* など、article-body.css/blocks.css 参照用）
 *   2. cms-design A-default 由来トークン（--accent, --ink, --bg など、_layout/_top/_category/_lower/_404.css 参照用）
 *   3. テーマA固有の末尾上書き
 */

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;400;500;700;900&display=swap');

:root {
  /* ============================================================
     1. 既存トークン（article-body.css / blocks.css 用）
     ============================================================ */

  /* 形状（控えめな角丸） */
  --radius: 6px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;

  /* 書体（本文サイズ・行間・字間は管理画面から指定可能。
     未指定時は colors.css に出力されないため、ここに書いた既定値が使われる） */
  --font-heading: "Noto Sans JP", "Hiragino Sans", sans-serif;
  --font-body: "Noto Sans JP", "Hiragino Sans", sans-serif;
  --font-size-base: var(--c-font-size-base, 17px);
  --line-height: var(--c-line-height, 1.95);
  --letter-spacing: var(--c-letter-spacing, 0.02em);

  /* レイアウト */
  --content-max: 720px;
  --site-max: 1180px;
  --spacing-section: 56px;

  /* トランジション */
  --transition: 0.25s ease;
  --transition-slow: 0.45s ease;

  /* ステップブロック */
  --step-num-bg: var(--c-accent);
  --step-num-color: #fff;
  --step-num-radius: 50%;
  --step-line-color: var(--c-accent-pale);
  --step-border: none;

  /* FAQブロック */
  --faq-q-badge-bg: var(--c-accent);
  --faq-q-badge-color: #fff;
  --faq-q-badge-radius: var(--radius-sm);
  --faq-a-badge-bg: var(--c-accent-faint);
  --faq-a-badge-color: var(--c-accent);
  --faq-item-bg: var(--c-surface);
  --faq-item-border: 1px solid var(--c-border);

  /* ============================================================
     2. cms-design A-default 由来トークン（_layout/_top/_category/_lower/_404.css 用）
     既存 --c-* と意味が重なる項目は colors.css で上書きされる値を参照
     ============================================================ */
  --bg:           var(--c-bg, #FFFFFF);
  --surface:      var(--c-surface, #FFFFFF);
  --ink:          var(--c-text, #1A1A1A);
  --ink-2:        #2B2B2B;
  --muted:        var(--c-muted, #6B6B68);
  --muted-2:      #A8A8A4;
  --line:         var(--c-border, #EAEAE6);
  --soft:         var(--c-highlight, #F6F5F2);
  --accent:       var(--c-accent, #2BA572);
  --accent-rgb:   43, 165, 114;
  --accent-2:     var(--c-accent-2, #3FBD86);
  --cta:          var(--c-cta, var(--c-accent, #2BA572));
  --cta-ink:      #FFFFFF;
  --rank-1:       var(--c-rank-1, #C8A04A);
  --rank-2:       var(--c-rank-2, #9CA3AC);
  --rank-3:       var(--c-rank-3, #B27B4A);
  --star-1:       #F5B842;
  --star-2:       #FFD86F;

  --font-sans:    "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --font-display: "Noto Sans JP", sans-serif;

  --max:          720px;

  /* placeholder image (記事サムネ未設定時のストライプ) */
  --placeholder-1: #F4F2EC;
  --placeholder-2: #EEEBE3;

  /* avatar fallback gradient (.profile / .row .author) */
  --avatar-1:      #E8E6E0;
  --avatar-2:      #C9C7C0;
  --avatar-ink:    #5C5A55;

  /* lower / category page header background */
  --lp-header-bg:  #FBFAF7;

  /* hero (Top の .hero) — _top.css から参照 */
  --hero-accent:        var(--c-accent, #2BA572);
  --hero-accent-rgb:    43, 165, 114;
  --hero-bg-fallback:   #1F1A14;
  --hero-image:         none; /* ホーム生成時に inline style で上書きされる */
  --news-btn-hover:     #228F62;
}

/* ============================================================
   3. テーマA固有の末尾上書き（cms-design A-default _layout.css 末尾より）
   ============================================================ */

.brand-text{
  font-family: var(--font-sans) !important;
  font-size: 20px !important;
  letter-spacing: 0.16em !important;
}
.brand-mark{
  background: var(--accent) !important;
  color: #fff !important;
}