/* ============================================================
   内海あさ — Brand Design System  /  tokens.css  v1.0
   ------------------------------------------------------------
   全プロダクト共通の土台。母屋(asa-base.com)・よくばり予報・
   セルフ幹事の味方 はこの 1 本を読み込んで世界観を揃える。

   出典: claude.ai/design「内海あさ Design System」
   色はアイコン(イラスト)から抽出。
   ============================================================ */

:root {
  /* ---- Foundation ---- */
  --cream:      #faf6ef;   /* 背景・ページ地色 */
  --surface:    #fdfcf9;   /* カード面 */
  --charcoal:   #2a2218;   /* 本文・見出し */
  --mid:        #8a7e74;   /* 補足・ラベル・キャプション */
  --line:       #e8dfd3;   /* 罫線・枠 */

  /* ---- Brand accents (アバターから抽出) ---- */
  --sky:        #8dbccc;   /* メイン: ボタン・リンク・ハイライト */
  --sky-deep:   #3d8fab;   /* スカイ上の文字 */
  --sky-lt:     #d6eaf2;   /* タグ背景・引用 */
  --blush:      #e8aebb;   /* サブ: 温かみ・Podcast */
  --blush-deep: #b86878;   /* ブラッシュ上の文字 */
  --blush-lt:   #f7e1e6;
  --sand:       #d4bc98;   /* アース: 仕切り・YouTube */
  --sand-deep:  #8a6e44;
  --sand-lt:    #f2e9d8;

  /* ---- Type families ---- */
  --serif:  'Shippori Mincho B1', 'Hiragino Mincho ProN', 'Yu Mincho', serif;
  --gothic: 'Zen Maru Gothic', 'Hiragino Maru Gothic ProN', sans-serif;
  --sans:   'Noto Sans JP', 'Hiragino Sans', sans-serif;
  --latin:  'Cormorant Garamond', Georgia, serif;

  /* ---- 見出し書体(切替ポイント) ----
     標準は本文と同じ Noto Sans JP（主張しない・淡々と統一感）。
     明朝(--serif)・丸ゴ(--gothic)は読み物/特集など文脈で使い分け可。
     全プロダクトの見出しはここ 1 行で一括変更。 */
  --font-head: var(--sans);

  /* ---- Radius ---- */
  --r-sm: 2px;
  --r-md: 8px;
  --r-lg: 16px;
  --r-pill: 999px;
}

* , *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  background: var(--cream);
  color: var(--charcoal);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.85;
  -webkit-font-smoothing: antialiased;
}

/* ---- 見出し ---- */
.h-display { font-family: var(--font-head); font-weight: 700; letter-spacing: 0.06em; line-height: 1; }
.h1        { font-family: var(--font-head); font-weight: 700; font-size: 28px; letter-spacing: 0.02em; line-height: 1.4; }
.h2        { font-family: var(--font-head); font-weight: 600; font-size: 20px; letter-spacing: 0.02em; line-height: 1.5; }
.latin-i   { font-family: var(--latin); font-style: italic; color: var(--mid); letter-spacing: 0.06em; }
.eyebrow   { font-size: 10px; font-weight: 700; letter-spacing: 0.25em; text-transform: uppercase; color: var(--mid); }

/* ---- Buttons ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 10px 22px; font-family: var(--sans); font-size: 13px; font-weight: 500;
  letter-spacing: 0.06em; border-radius: var(--r-sm); border: none;
  cursor: pointer; text-decoration: none; transition: all 0.15s;
}
.btn-primary   { background: var(--sky);   color: #fff; }
.btn-primary:hover   { background: #6aa8be; }
.btn-secondary { background: transparent; color: var(--sky-deep); border: 1.5px solid var(--sky); }
.btn-secondary:hover { background: var(--sky-lt); }
.btn-ghost     { background: transparent; color: var(--charcoal); border: 1.5px solid var(--line); }
.btn-ghost:hover     { background: var(--line); }
.btn-warm      { background: var(--sand); color: #fff; }
.btn-warm:hover      { background: #bea880; }

/* ---- Chips / Tags ---- */
.chip, .tag {
  display: inline-flex; align-items: center; font-size: 11px; font-weight: 500;
  letter-spacing: 0.04em; padding: 4px 12px; border-radius: var(--r-pill);
}
.tag { border-radius: var(--r-sm); }
.c-sky     { background: var(--sky-lt);   color: var(--sky-deep); }
.c-blush   { background: var(--blush-lt); color: var(--blush-deep); }
.c-sand    { background: var(--sand-lt);  color: var(--sand-deep); }
.c-neutral { background: var(--line);     color: var(--mid); }

/* ---- Surface card ---- */
.card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-md); overflow: hidden;
}

/* ---- Dividers ---- */
.d-plain { height: 1px; background: var(--line); border: 0; }
.d-dot   { display: flex; align-items: center; gap: 8px; }
.d-dot::before, .d-dot::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.d-dot-bead { width: 4px; height: 4px; border-radius: 50%; background: var(--blush); }

/* ---- Avatar ---- */
.avatar { border-radius: 50%; overflow: hidden; border: 2px solid var(--line); object-fit: cover; display: block; }