/* ============================================================
   Overstrata — tokens.css
   デザイントークン（CSSカスタムプロパティ）
   これ以外の場所に色・サイズの生値を書かないこと。
   読み込み順: tokens.css → base.css → components.css
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Shippori+Mincho+B1:wght@500;600;700;800&family=Noto+Sans+JP:wght@400;500;700&family=M+PLUS+1+Code:wght@400;500&display=swap');

:root {
  color-scheme: light;

  /* --- 基本パレット / Base palette ---------------------------------- */
  --paper:        #F6F4EE; /* 紙白   ページ地 */
  --stratum:      #ECE8DE; /* 淡層   パネル・引用地・コード地 */
  --ink:          #26262E; /* 墨     本文 */
  --deep-indigo:  #1F2B47; /* 深層藍 見出し・フッター地 */
  --rule:         #D7D2C4; /* 罫線   境界線 */

  /* 三つの力（意味を持つ色。装飾に使わない） */
  --umbral:       #6E4FA3; /* 冥力紫 リンク・現在地 */
  --umbral-deep:  #563C82; /* hover / pressed */
  --divine:       #B8912F; /* 神界金 重要な注意 */
  --spirit:       #3E7C6B; /* 精霊翠 補足・作例 */
  --umbral-tint:  #EDE8F4;
  --divine-tint:  #F5EEDB;
  --spirit-tint:  #E4EFEB;

  /* 深度バー（サイトの唯一の装飾モチーフ） */
  --depth-topsoil: #3E7C6B;
  --depth-earth:   #8A6B4A;
  --depth-abyss:   #3A2B52;

  /* --- 意味的な割当 / Semantic assignment --------------------------- */
  --bg-page:         var(--paper);
  --bg-panel:        var(--stratum);
  --bg-footer:       var(--deep-indigo);
  --surface-card:    var(--paper);

  --text-body:       var(--ink);
  --text-heading:    var(--deep-indigo);
  --text-muted:      #6B6B73;   /* キャプション・日付・出典 */
  --text-invert:     var(--paper);
  --text-link:       var(--umbral);
  --text-link-hover: var(--umbral-deep);

  --border-default:  var(--rule);
  --border-strong:   #C3BCA9;
  --focus-ring:      var(--umbral);

  /* --- フォント ------------------------------------------------------ */
  --font-serif: 'Shippori Mincho B1', 'Yu Mincho', 'YuMincho', serif;
  --font-sans:  'Noto Sans JP', system-ui, sans-serif;
  --font-mono:  'M PLUS 1 Code', ui-monospace, monospace;

  --font-body:    var(--font-sans);   /* 長文本文 */
  --font-heading: var(--font-serif);  /* 見出し・作中引用 */
  --font-data:    var(--font-mono);   /* 数値・ダイス表記 */

  /* --- フォントサイズ階梯 -------------------------------------------- */
  --fs-display: 2.75rem;  /* 44px 記事タイトル */
  --fs-h1:      2.5rem;   /* 40px */
  --fs-h2:      1.875rem; /* 30px 章見出し */
  --fs-h3:      1.375rem; /* 22px 節見出し */
  --fs-h4:      1.125rem; /* 18px 小見出し */
  --fs-lead:    1.125rem; /* 18px 導入部 */
  --fs-body:    1rem;     /* 16px 本文 */
  --fs-small:   0.875rem; /* 14px キャプション・メタ */
  --fs-data:    0.9375rem;/* 15px 数値 */

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-bold:    700;
  --fw-heavy:   800;

  /* --- 行間 ---------------------------------------------------------- */
  --lh-body:    1.9;   /* 日本語長文 */
  --lh-lead:    2.0;   /* 導入部はさらにゆったり */
  --lh-heading: 1.45;
  --lh-tight:   1.25;

  --ls-heading: 0.02em;
  --ls-caps:    0.12em;

  /* --- 余白スケール（4px基準） -------------------------------------- */
  --sp-1: 0.25rem;  /*  4 */
  --sp-2: 0.5rem;   /*  8 */
  --sp-3: 0.75rem;  /* 12 */
  --sp-4: 1rem;     /* 16 */
  --sp-5: 1.5rem;   /* 24 */
  --sp-6: 2rem;     /* 32 */
  --sp-7: 3rem;     /* 48 */
  --sp-8: 4rem;     /* 64 */
  --sp-9: 6rem;     /* 96 */

  /* --- 角丸・影・罫 -------------------------------------------------- */
  --radius-sm: 2px;
  --radius-md: 4px;
  --shadow-none: none;
  --shadow-sm: 0 1px 2px rgba(31, 43, 71, 0.06);
  --shadow-md: 0 2px 6px rgba(31, 43, 71, 0.08);
  --bw-hair:   1px;
  --bw-accent: 3px;
  --depth-bar-width: 4px;

  /* --- レイアウト ---------------------------------------------------- */
  --measure:       40em;   /* 本文行長＝全角約40字 */
  --measure-wide:  52em;   /* 図版・カード列がはみ出す幅 */
  --page-max:      72rem;  /* ヘッダー／一覧の外枠 */
  --gutter:        var(--sp-5);
  --header-h:      64px;

  /* --- モーション ---------------------------------------------------- */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 120ms;
  --dur-med:  220ms;
}

/* --- ブレークポイント -----------------------------------------------
   CSSカスタムプロパティは @media では使えないため、値をここに明記する。
   実装側はこの数値をそのまま使うこと。
     sm:  480px   小型スマートフォン
     md:  768px   タブレット／記事本文の余白切替
     lg: 1024px   図版はみ出しレイアウトの発火点
     xl: 1280px
   -------------------------------------------------------------------- */