/* UI DIRECTION: W02 手描き水彩ノート / 実装=案A Community Classroom (白地+淡いミントのアクセント面・親しみのある青/緑/陽だまりの黄・コーラルは小面積・上部レッスンタブ型ナビ・やわらかい角丸カード(紙テクスチャなし)・結論は「今日できること」チェックリスト) */
/* STYLE ANCHOR: 白い紙に黒ペンの線画と淡い水彩で塗った日本語の解説図。細い区切り線、小さな挿絵、温かい手描きの線。人物は簡略化した親しみのある描き方。文字は手書き風でなく読みやすいゴシックで置く。彩度は低めで、要点だけ水彩の差し色を乗せる。基調は白い紙(#FFFFFF)と黒ペン(#2B3A3A)の線。水彩の差し色は青(#3B7DD8)・緑(#3F9A6E)・陽だまりの黄(#F5C542)の三色を薄く。コーラル(#E8785F)はごく小面積。日本語は太めの丸ゴシックで、読める大きさに焼き込む。
   全キービジュアル画像はこの記述をプロンプトに含める */

/* ============================================================
   obsidian-mobile-link-guide / beginner-v2 — design tokens
   ★ :root を宣言してよいのはこのファイルだけ (index.html 側では var() 参照のみ)。
   ★ フォント: 見出しのみ Google Fonts 'Zen Maru Gothic' (1 種)。読めない環境では
     システムの丸ゴシック/ゴシックへフォールバックする (font-display: swap)。
   ============================================================ */

:root {
  /* --- 構造トークン ------------------------------------------- */
  --vw-max: 820px;            /* 本文列の最大幅 (ライト資料: v1 より少し狭く) */
  --tabs-h: 56px;             /* 上部レッスンタブの高さ */
  --space-1: 6px;
  --space-2: 10px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 36px;
  --space-6: 56px;
  --space-7: 96px;
  --r: 16px;                  /* やわらかい角丸 */
  --r-sm: 10px;
  --line-h: 1.95;             /* 本文行間 (初学者向け: 広め) */
  --font-head: 'Zen Maru Gothic', 'Hiragino Maru Gothic ProN', 'BIZ UDPGothic',
               'Yu Gothic Medium', 'Yu Gothic', 'Meiryo', system-ui, sans-serif;
  --font-sans: 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'BIZ UDPGothic',
               'Yu Gothic Medium', 'Yu Gothic', 'Meiryo', system-ui, sans-serif;
  --font-mono: 'Consolas', 'SF Mono', 'Menlo', 'Roboto Mono', monospace;
  --shadow: 0 2px 10px rgba(43, 58, 58, 0.06);   /* やわらかいカードの影 (弱く) */

  /* --- W02 案A パレット (白 / 淡いミント面 + 青・緑・黄、コーラル小) --- */
  --bg: #ffffff;              /* ページ地 (白い紙) */
  --surface: #f3f8f6;         /* 淡いミントのアクセント面 (カード地) */
  --surface-2: #e6f1ec;       /* 一段濃いミント (現在地タブ・details) */
  --sky: #e9f2fb;             /* 淡いスカイ面 (吹き出し・AI 側) */
  --ink: #2b3a3a;             /* 本文 (黒ペン) */
  --ink-soft: #5b6b6a;        /* 補足テキスト */
  --ink-faint: #8b9797;       /* 注記 (重要文言には使わない) */
  --line: #d9e3df;            /* 罫線 */
  --blue: #3b7dd8;            /* 親しみのある青 (リンク・現在地) */
  --blue-deep: #2b62ad;       /* テキスト用の青 (AA) */
  --green: #3f9a6e;           /* 良い側・チェック */
  --green-deep: #2f7a56;      /* テキスト用の緑 (AA) */
  --yellow: #f5c542;          /* 陽だまりの黄 (マーカー・ハイライト) */
  --yellow-soft: #fff4cc;     /* 黄の淡い面 (マーカー線) */
  --coral: #e8785f;           /* 小面積のみ (注意・「戻ってこない」側の印) */
  --coral-deep: #c85b44;      /* テキスト用のコーラル (AA) */

  /* --- seminar 追加分 ------------------------------------------ */
  --kv-good: var(--green);
  --kv-bad: #9aa0a6;          /* 対比の「静かな側」グレー (この hex は tokens.css 内のみ許可) */
  --kv-accent: var(--blue);
}