@charset "utf-8";
/* ============================================================================
   鎌倉市介護お役立ち情報 — デザイントークン
   ----------------------------------------------------------------------------
   このファイルは「値」だけを持つ。見た目のルール（コンポーネント）は書かない。
   コンポーネント側（oyakudachi-v2.css）は生値を書かず、必ずここのトークンを使う。

   ■ 3層構造
     1) プリミティブ  --oyk-green-600 など。実際の色・寸法そのもの
     2) ロール        --oyk-brand など。「何に使う色か」。コンポーネントはこれを参照
     3) レスポンシブ  ロールを @media で再定義。コンポーネント側は書き換え不要

     → 記事のトンマナを変えたいときは 2) のロールだけ触ればよい。
       文字サイズをスマホで一段落としたいときは 3) だけ触ればよい。

   ■ ブレークポイント（CSS変数はメディアクエリの条件に使えないため定数で運用）
     タブレット : max-width: 900px
     スマホ     : max-width: 640px  ← テーマの PC/SP 切替と同値。ズラさないこと
     極小       : max-width: 360px

   ■ 置き場所
     :root に置く。追従電話バー（.oyk-tel-scroll）が .oyk2 の外側にあるため、
     .oyk2 スコープにすると var() が解決できず背景が透明になる。
   ========================================================================== */

:root {

  /* ==========================================================================
     1) プリミティブ — 実際の値。ここを直接コンポーネントで使わない
     ========================================================================== */

  /* --- 緑（ブランド）。theme の --color-accent-green #57922b を基準にした ---- */
  --oyk-green-700   : #3f6d1e;
  --oyk-green-600   : #57922b;   /* = var(--color-accent-green) */
  --oyk-green-500   : #6ea63c;
  --oyk-green-100   : #d5e7c2;
  --oyk-green-50    : #f1f7ea;

  /* --- クリーム／アンバー（共感・注目）------------------------------------- */
  --oyk-amber-700   : #9a6b12;
  --oyk-amber-600   : #b5741a;
  --oyk-cream-200   : #ecdcab;
  --oyk-cream-100   : #f9edc7;
  --oyk-cream-50    : #fdf6e0;

  /* --- オレンジ（注意）------------------------------------------------------ */
  --oyk-orange-700  : #c25c0a;
  --oyk-orange-500  : #ef7c1a;
  --oyk-orange-200  : #f7d3ab;
  --oyk-orange-50   : #fff3e6;

  /* --- ニュートラル --------------------------------------------------------- */
  --oyk-neutral-900 : #2f3a28;
  --oyk-neutral-700 : #3c433a;
  --oyk-neutral-500 : #6d766a;
  --oyk-neutral-200 : #e3e6df;
  --oyk-neutral-50  : #fafbf8;
  --oyk-white       : #ffffff;

  /* --- その他 --------------------------------------------------------------- */
  --oyk-red-500     : #d64545;   /* PDFタグ。慣習色なのでブランドから独立させる */


  /* ==========================================================================
     2) ロール — コンポーネントが参照するのはここから下だけ
     ========================================================================== */

  /* --- ブランド（緑）-------------------------------------------------------
     記事カテゴリごとに色を変えたくなったら、この5つだけ差し替える。
     構造・余白・文字サイズは一切触らずにトンマナだけ切り替わる。            */
  --oyk-brand       : var(--oyk-green-600);   /* 面・アイコン・ボタン */
  --oyk-brand-deep  : var(--oyk-green-700);   /* 見出し文字 */
  --oyk-brand-mid   : var(--oyk-green-500);   /* 罫・小さな装飾 */
  --oyk-brand-pale  : var(--oyk-green-50);    /* 淡い面 */
  --oyk-brand-line  : var(--oyk-green-100);   /* 境界線 */
  --oyk-on-brand    : var(--oyk-white);       /* ブランド面の上の文字 */

  /* --- 注目（クリーム）＝「こんなお悩み」「目次」「補足」------------------- */
  --oyk-accent-bg   : var(--oyk-cream-50);
  --oyk-accent-bg-2 : var(--oyk-cream-100);   /* A バッジなど一段濃い面 */
  --oyk-accent-line : var(--oyk-cream-200);
  --oyk-accent-ink  : var(--oyk-amber-600);   /* クリーム面の見出し */
  --oyk-accent-ink-2: var(--oyk-amber-700);   /* クリーム面の番号・ラベル */

  /* --- 注意（オレンジ）＝ 注意喚起バー・期限の強調 ------------------------- */
  --oyk-warn        : var(--oyk-orange-500);
  --oyk-warn-bg     : var(--oyk-orange-50);
  --oyk-warn-line   : var(--oyk-orange-200);
  --oyk-warn-ink    : var(--oyk-orange-700);

  /* --- 面・文字・罫 --------------------------------------------------------- */
  --oyk-surface     : var(--oyk-white);
  --oyk-surface-sub : var(--oyk-neutral-50);          /* 表の見出し・出典ボックス */
  --oyk-surface-veil: rgba(255, 255, 255, .75);       /* 淡色面の上に重ねる白 */
  --oyk-surface-bar : rgba(255, 255, 255, .95);       /* 追従バー */
  --oyk-ink         : var(--oyk-neutral-900);         /* 見出し・強調 */
  --oyk-text        : var(--oyk-neutral-700);         /* 本文 */
  --oyk-muted       : var(--oyk-neutral-500);         /* 注記・補助 */
  --oyk-line        : var(--oyk-neutral-200);         /* 標準の罫 */
  --oyk-doc         : var(--oyk-red-500);             /* PDFタグ */

  /* --- 影 ------------------------------------------------------------------- */
  --oyk-shadow      : 0 1px 3px rgba(47, 58, 40, .07), 0 8px 24px rgba(47, 58, 40, .05);
  --oyk-shadow-bar  : 0 -2px 12px rgba(47, 58, 40, .08);


  /* ==========================================================================
     3) タイポグラフィ — 役割で命名する。px直書き禁止
     ========================================================================== */

  --oyk-font        : 'Noto Sans JP', 'Kosugi Maru', "ヒラギノ角ゴ Pro W3", Meiryo, sans-serif;
  --oyk-font-num    : 'Poppins', 'PT Sans Narrow', sans-serif;  /* 電話番号など数字 */

  /* --- 見出し --------------------------------------------------------------- */
  --oyk-fs-hero     : clamp(28px, 3.2vw, 40px);  /* 記事タイトル */
  --oyk-fs-lead     : 18px;      /* ヒーローのリード文 */
  --oyk-fs-h2       : 20px;      /* 読み物の大見出し（緑帯） */
  --oyk-fs-h3       : 17.5px;    /* 読み物の小見出し（左罫） */
  --oyk-fs-title    : 19px;      /* カード見出し */
  --oyk-fs-title-sm : 17px;      /* ボックス見出し（お悩み・注意バー） */
  --oyk-fs-title-lg : 21px;      /* 問い合わせ先の課名 */

  /* --- 本文 ----------------------------------------------------------------- */
  --oyk-fs-body     : 16px;      /* 読み物の本文。ページの基準 */
  --oyk-fs-body-sm  : 15.5px;    /* 一覧型カードの本文 */
  --oyk-fs-ui       : 15px;      /* 表・リンク・ボタン等のUI */
  --oyk-fs-ui-sm    : 14.5px;    /* タグ・定義リスト */
  --oyk-fs-note     : 13.5px;    /* ※注記・補助テキスト */
  --oyk-fs-caption  : 12.5px;    /* 日付・ファイルサイズ・ラベル */
  --oyk-fs-micro    : 11px;      /* 画像クレジット・番号バッジ */

  /* --- 数字（強調）---------------------------------------------------------- */
  --oyk-fs-tel      : 32px;      /* 電話番号 */
  --oyk-fs-tel-bar  : 21px;      /* 追従バーの電話番号 */
  --oyk-fs-num      : 26px;      /* 「最大4点」の 4 など */

  /* --- 行送り --------------------------------------------------------------- */
  --oyk-lh-body     : 1.85;      /* 読み物本文 */
  --oyk-lh-relaxed  : 1.75;
  --oyk-lh-normal   : 1.7;       /* カード本文 */
  --oyk-lh-snug     : 1.6;
  --oyk-lh-tight    : 1.45;
  --oyk-lh-title    : 1.4;       /* 見出し */
  --oyk-lh-hero     : 1.28;      /* 記事タイトル */
  --oyk-lh-none     : 1;         /* バッジ内の数字 */

  /* --- 太さ・字間 ----------------------------------------------------------- */
  --oyk-fw-bold     : 700;
  --oyk-fw-medium   : 500;
  --oyk-ls-wide     : .04em;     /* ラベル・小見出し */
  --oyk-ls-tight    : .01em;


  /* ==========================================================================
     4) 余白 — 段階スケール（4pxグリッド）と、役割別のセマンティック
     ========================================================================== */

  --oyk-sp-1        : 4px;
  --oyk-sp-2        : 8px;
  --oyk-sp-3        : 12px;
  --oyk-sp-4        : 16px;
  --oyk-sp-5        : 20px;
  --oyk-sp-6        : 24px;
  --oyk-sp-8        : 32px;
  --oyk-sp-10       : 40px;
  --oyk-sp-13       : 52px;

  /* 役割別（スマホで縮む）*/
  --oyk-pad-card    : 26px;              /* カード左右 */
  --oyk-pad-card-y  : 24px;              /* カード上下 */
  --oyk-pad-box     : 22px;              /* お悩み・目次・補足ボックス */
  --oyk-pad-hero    : 40px 36px 36px;    /* ヒーロー本文側 */
  --oyk-pad-contact : 28px 32px;         /* 問い合わせ先 */
  --oyk-gap-grid    : 20px;              /* カード同士・2カラム間 */
  --oyk-gap-block   : 40px;              /* 大ブロック間 */
  --oyk-gap-switch  : 56px;              /* 一覧型↔読み物型の切り替え上 */


  /* ==========================================================================
     5) 角丸・線・アイコン・モーション・レイアウト
     ========================================================================== */

  --oyk-r-xs        : 4px;       /* タグ */
  --oyk-r-sm        : 8px;       /* 小さな面・見出し帯 */
  --oyk-r-md        : 10px;      /* 中くらいの面 */
  --oyk-r-lg        : 12px;      /* カード */
  --oyk-r-xl        : 16px;      /* ヒーロー・問い合わせ先 */
  --oyk-r-pill      : 999px;

  --oyk-bw          : 1px;       /* 標準の線幅 */
  --oyk-bw-head     : 2px;       /* カード見出しの下線 */
  --oyk-bw-accent   : 5px;       /* 小見出しの左罫 */
  --oyk-bw-bar      : 6px;       /* 注意バーの左罫 */

  --oyk-icon-badge  : 56px;      /* サマリーの丸アイコン外径 */
  --oyk-icon-glyph  : 32px;      /* その中のSVG */
  --oyk-icon-head   : 26px;      /* カード見出しのアイコン */
  --oyk-icon-inline : 22px;      /* 文中・ボタン内のアイコン */

  --oyk-dur-fast    : .2s;
  --oyk-dur         : .25s;
  --oyk-dur-slow    : .3s;
  --oyk-ease        : ease;

  --oyk-w-page      : 960px;     /* 一覧型パートの最大幅 */
  --oyk-w-read      : 800px;     /* 読み物パートの最大幅（1行の文字数を抑える） */
  --oyk-w-cta       : 460px;
  --oyk-z-bar       : 90;
}


/* ============================================================================
   レスポンシブ — ロールの再定義だけ。コンポーネント側は一切触らない
   ============================================================================ */

/* --- スマートフォン（テーマの PC/SP 切替と同じ 640px）---------------------- */
@media (max-width: 640px) {
  :root {
    /* 見出し */
    --oyk-fs-hero     : 25px;
    --oyk-fs-lead     : 16px;
    --oyk-fs-h2       : 17.5px;
    --oyk-fs-h3       : 16px;
    --oyk-fs-title    : 17px;
    --oyk-fs-title-sm : 15.5px;
    --oyk-fs-title-lg : 18px;

    /* 本文 */
    --oyk-fs-body     : 15px;
    --oyk-fs-body-sm  : 14.5px;
    --oyk-fs-ui       : 14.5px;
    --oyk-fs-ui-sm    : 14px;
    --oyk-fs-note     : 13px;
    --oyk-fs-caption  : 12px;

    /* 数字 */
    --oyk-fs-tel      : 26px;
    --oyk-fs-num      : 22px;

    /* 行送り */
    --oyk-lh-body     : 1.8;

    /* 余白 */
    --oyk-pad-card    : 18px;
    --oyk-pad-card-y  : 18px;
    --oyk-pad-box     : 16px;
    --oyk-pad-hero    : 22px 18px 20px;
    --oyk-pad-contact : 22px 18px;
    --oyk-gap-grid    : 10px;
    --oyk-gap-block   : 28px;
    --oyk-gap-switch  : 40px;

    /* 角丸・アイコン */
    --oyk-r-xl        : 12px;
    --oyk-r-lg        : 10px;
    --oyk-icon-badge  : 46px;
    --oyk-icon-glyph  : 26px;
    --oyk-bw-bar      : 5px;
  }
}

/* --- 極小画面（iPhone SE 等）---------------------------------------------- */
@media (max-width: 360px) {
  :root {
    --oyk-fs-hero     : 22px;
    --oyk-fs-tel      : 22px;
    --oyk-fs-tel-bar  : 18px;
  }
}

/* --- 印刷（A4）------------------------------------------------------------- */
@media print {
  :root {
    --oyk-shadow      : none;
    --oyk-shadow-bar  : none;
  }
}