/* =====================================================================
   DJr デザイントークン — C案ミックス・雑誌調（2026-07-10 リスキン / DJR-0012）
   正: daigakuj_site/design-mocks の C案（本体 ADR-121 選定）
       + sns-lib/render.py PRESETS/GENRES（紺・レモン・ジャンル5色）
   骨格（タイポスケール・余白・a11y・英字オーバーライン）はモノクローム版
   （DJR-0011）から蒸留して継承（本体 ADR-120「技法は蒸留」）。
   原則:
   - 白地×紺インク。構造色=紺 / リンク・オーバーライン=青 / 装飾下線=空色
   - レモンはブランドの点と短いバー専用（文字色には使わない）
   - ジャンル色は細部にだけ（チップ・ラベル角・色バー）
   - 角丸は小さく（3〜8px）・影ゼロ
   ===================================================================== */
:root {
  /* --- 基本色 --- */
  --color-bg:            #ffffff;
  --color-surface:       #F2F6FA;   /* 記事 h2 帯・サムネ代替の薄青地 */
  --color-surface-soft:  #FAFCFE;   /* 引用の地 */
  --color-text:          #1B2A3D;   /* インク */
  --color-muted:         #66788E;   /* 日付・補助（白地で AA） */
  --color-quote:         #3D4E63;   /* 引用文 */
  --color-brand:         #003366;   /* 紺: 構造色（罫・ボタン・ブランド） */
  --color-brand-deep:    #0B2D5C;
  --color-accent:        #FFD84D;   /* レモン: 点・短いバー・コピー完了のみ */
  --color-link:          #005A9C;   /* 青: リンク・オーバーライン */
  --color-link-deco:     #7EC8E3;   /* 空色: 下線・囲みの装飾 */
  --color-border:        #E3EAF2;   /* 細罫 */
  --color-border-strong: #003366;   /* セクション頭・フッタの紺罫 */
  --color-focus:         #1a6dff;
  --color-error:         #B3261E;  /* フォームエラー（白地で AA） */

  /* --- ジャンル色（render.py GENRES 準拠） ---
     --*-bar = 面・バー用 / --*-text = 白地で文字にも使える濃度 */
  --g-people:  #0B2D5C;  --gt-people:  #0B2D5C;
  --g-science: #005A9C;  --gt-science: #005A9C;
  --g-path:    #7EC8E3;  --gt-path:    #3D96BE;
  --g-essay:   #FFD84D;  --gt-essay:   #B8860B;
  --g-news:    #66788E;  --gt-news:    #66788E;  /* 面 #F2F4F6 は白地で消えるため muted */

  /* ページ/要素のカテゴリ色（既定=ブランド。.cat-* が上書き） */
  --cat-bar:  var(--color-accent);
  --cat-text: var(--color-brand);

  /* --- タイポグラフィ（ゴシック・Noto Sans JP 400/500/700/900） --- */
  --font-sans: "Noto Sans JP", system-ui, -apple-system,
               "Hiragino Kaku Gothic ProN", "Yu Gothic", "YuGothic", Meiryo, sans-serif;
  --font-heading: var(--font-sans);
  --fs-base: 16px;
  --fs-xs:   0.6875rem;   /* 11px: 英字オーバーライン */
  --fs-sm:   0.8125rem;   /* 13px: 日付・ラベル */
  --fs-md:   1rem;
  --fs-lg:   1.125rem;    /* リード */
  --fs-h3:   clamp(1.02rem, 0.95rem + 0.4vw, 1.18rem);   /* カード見出し */
  --fs-h2:   clamp(1.45rem, 1.15rem + 1.6vw, 2.1rem);    /* セクション見出し */
  --fs-h1:   clamp(1.65rem, 1.2rem + 2.2vw, 2.5rem);     /* 記事タイトル */
  --fs-display: clamp(1.9rem, 1.2rem + 3.6vw, 3.3rem);   /* ヒーロー */
  --lh-base: 1.75;
  --lh-reading: 1.9;      /* 記事本文（モック準拠） */
  --lh-heading: 1.5;
  --lh-tight: 1.28;
  --ls-base: 0.02em;
  --ls-heading: 0.01em;
  --ls-wide: 0.24em;      /* 英字オーバーライン */
  --fw-normal: 400;
  --fw-medium: 500;
  --fw-bold: 700;
  --fw-black: 900;

  /* --- 余白・レイアウト --- */
  --space-1: .25rem; --space-2: .5rem; --space-3: 1rem; --space-4: 1.5rem;
  --space-5: 2.5rem; --space-6: 4.5rem; --space-7: 7rem;
  --container-max: 1200px;
  --content-max: 40rem;
  --gutter: clamp(1.25rem, 5vw, 3rem);
  --header-height: 4rem;

  /* --- 形・動き（小さな角丸 / 影ゼロ / 最小の動き） --- */
  --radius-xs: 3px;       /* チップ */
  --radius-sm: 4px;       /* 見出し帯 */
  --radius-md: 6px;       /* ボタン */
  --radius-lg: 8px;       /* 画像・カード・引用 */
  --transition: 200ms ease;
  --transition-slow: 500ms cubic-bezier(.22,.61,.36,1);
  --thumb-focus: 50% 28%;  /* サムネ切り抜き基準点（顔切れ対策。本体サイト実績値。
                              個別上書きは _src/thumb_focus.json → style 属性。DJR-0017） */
  --z-header: 100;
  --focus-ring: 3px solid var(--color-focus);
  --focus-offset: 2px;
}

/* --- ジャンル色バインディング（本体 ADR-118 の 5 ジャンル、2026-07-10 適用済み） ---
   body.cat-* でページアクセント（マストヘッド上端バー）、
   .chip / .card-label / .corner 等の要素にも直接付く。 */
.cat-people  { --cat-bar: var(--g-people);  --cat-text: var(--gt-people); }
.cat-science { --cat-bar: var(--g-science); --cat-text: var(--gt-science); }
.cat-path    { --cat-bar: var(--g-path);    --cat-text: var(--gt-path); }
.cat-essay   { --cat-bar: var(--g-essay);   --cat-text: var(--gt-essay); }
.cat-news    { --cat-bar: var(--g-news);    --cat-text: var(--gt-news); }