/* ==========================================================================
   沖縄エンジニアHUB デザイントークン
   --------------------------------------------------------------------------
   方向性：案1「測る ─ 製図と計測」（ヒーローの図だけ案2「水平線」）
   決定の経緯と判断基準は docs/ops/site.md を参照。

   ルール
   - コンポーネントに生のHEX・px を書かない。ここの変数だけを使う
   - 余白は --space-* の10段だけ。clamp() で段の間の値を作らない
     （画面幅で変えたいときは、@media の中で意味の変数を別の段に差し替える）
   - 文字サイズは --step-* の6段だけ
   - 文字は全テキストでコントラスト比 4.5:1 以上（2026-09-13 決定）
   - 赤（--color-accent）は Discord への参加導線の面にだけ使う（同日決定）
   ========================================================================== */

:root{
  /* ---------- 色：原色（ここ以外で参照しない） ---------- */
  --stone-base:   #DFDCD4;   /* 琉球石灰岩。theme-color と同じ */
  --stone-light:  #E9E7E1;
  --ink-900:      #17181A;
  --ink-700:      #46484B;
  --ink-600:      #5E5F5E;
  --brand-red:    #E00010;   /* docs/brand.md */
  --brand-red-deep:#B8000D;  /* 赤の面のホバー時だけ */
  --white:        #FFFFFF;

  /* ---------- 色：意味（コンポーネントはこちらを使う） ----------
     比は地 #DFDCD4 ／面 #E9E7E1 に対する値 */
  --color-bg:              var(--stone-base);
  --color-surface:         var(--stone-light);
  --color-text-primary:    var(--ink-900);   /* 12.97 / 14.37  見出し・数字・意味のある線 */
  --color-text-secondary:  var(--ink-700);   /*  6.70 /  7.42  本文 */
  --color-text-tertiary:   var(--ink-600);   /*  4.68 /  5.19  註・出典・ラベル */
  --color-accent:          var(--brand-red); /* 面のみ。文字色に使わない（地に対して 3.67） */
  --color-accent-hover:    var(--brand-red-deep);
  --color-on-accent:       var(--white);     /*  5.03（ホバー時 6.90） */

  /* 線。新しいHEXを増やさず、墨を地に混ぜて作る */
  --color-line:            var(--color-text-primary);                                            /* 図・強い区切り */
  --color-line-subtle:     color-mix(in srgb, var(--color-text-primary) 22%, var(--color-bg));   /* 表の罫など。装飾扱い */

  /* 反転（フッター）。反転面の文字は1色だけ（薄い墨を置くと 4.5 を割る） */
  --color-bg-inverse:      var(--color-text-primary);
  --color-text-inverse:    var(--color-bg);  /* 12.97 */
  --color-line-inverse:    color-mix(in srgb, var(--color-text-inverse) 24%, var(--color-bg-inverse));  /* 反転面の区切り。装飾扱い */
  --color-focus:           var(--color-text-primary);

  /* ---------- 余白：4pxベースの10段 ---------- */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
  --space-9:  96px;
  --space-10: 128px;

  /* 余白：意味（画面幅で段を差し替えるのはここだけ） */
  --gutter:          var(--space-5);    /* shell の左右 */
  --section-y:       var(--space-8);    /* セクションの上下 */
  --block-gap:       var(--space-7);    /* セクション内の大きな塊どうし */
  --stack-gap:       var(--space-5);    /* 見出しと本文、段落の塊 */
  --inline-gap:      var(--space-3);    /* ボタンどうし等 */

  /* ---------- 文字：書体 ---------- */
  --font-ja:  "M PLUS 1", "Hiragino Sans", "Yu Gothic", "Noto Sans JP", sans-serif;
  /* 数字用。Plex Mono は数字と記号だけのサブセットで読むので、
     和文（万円 等）は次の M PLUS 1 に字ごとに落ちる。等幅の総称はそのあと */
  --font-num: "IBM Plex Mono", "M PLUS 1", "Hiragino Sans", "Yu Gothic", ui-monospace, monospace;
  --weight-regular: 400;
  --weight-bold:    700;

  /* ---------- 文字：サイズ（6段） ----------
     375px で比 1.25、1440px で比 1.333 に届くよう連続的に変える。本文は16px固定。
     和文は1字＝font-size なので、375px（本文幅327px）での最長行を確認済み：
       step-4 39px × 8字「沖縄の市場価値を」= 312px ≦ 327px */
  --step--1: 0.8rem;                                                     /* 12.8px            註・出典・ラベル */
  --step-0:  1rem;                                                       /* 16px              本文・ボタン */
  --step-1:  clamp(1.2500rem, 1.2208rem + 0.1247vw, 1.3330rem);          /* 20.0 → 21.3px    リード・h3 */
  --step-2:  clamp(1.5625rem, 1.4870rem + 0.3221vw, 1.7769rem);          /* 25.0 → 28.4px    引用・問い合わせ見出し */
  --step-3:  clamp(1.9531rem, 1.8068rem + 0.6242vw, 2.3686rem);          /* 31.3 → 37.9px    h2 */
  --step-4:  clamp(2.4414rem, 2.1893rem + 1.0756vw, 3.1573rem);          /* 39.1 → 50.5px    h1・差の数字 */

  /* 行間 */
  --leading-body:    1.8;
  --leading-heading: 1.35;
  --leading-numeral: 1;

  /* 字間。大きいほど詰める。本文はわずかに開く */
  --tracking-body:     0.03em;
  --tracking-caption:  0.04em;
  --tracking-h3:       0;
  --tracking-h2:      -0.02em;
  --tracking-h1:      -0.03em;
  --tracking-numeral: -0.02em;

  /* 1行の長さ。和文本文16pxで全角34〜36字（Phase 5 で実測して詰める） */
  --measure: 35em;
  --measure-heading: 16em;   /* h1。「沖縄の市場価値を変える。」12字＋余裕 */

  /* ---------- 形 ---------- */
  --radius-none: 0;      /* 面・ボタン・写真。ロゴが直線と正円なので、面は直線で切る */
  --radius-full: 999px;  /* 図の点など、正円にするものだけ */

  --line-thin:  1px;
  --line-thick: 3px;     /* 図の沖縄の線 */

  /* 影は使わない（0段）。区切りは線か面の色で行う */

  /* ---------- レイアウト ---------- */
  --shell-max:  1120px;
  --header-h:   64px;

  /* ---------- 動き ---------- */
  --duration-fast: 160ms;   /* ホバー・メニュー */
  --duration-slow: 640ms;   /* ヒーローの線を引く */
  --ease-standard: cubic-bezier(.2, 0, 0, 1);
  --ease-draw:     cubic-bezier(.22, .61, .36, 1);
}

@media (min-width: 768px){
  :root{
    --gutter:    var(--space-6);
    --section-y: var(--space-9);
    --block-gap: var(--space-8);
    --stack-gap: var(--space-6);
  }
}

@media (min-width: 1120px){
  :root{
    --gutter:    var(--space-7);
    --section-y: var(--space-10);
  }
}

@media (prefers-reduced-motion: reduce){
  :root{
    --duration-fast: 1ms;
    --duration-slow: 1ms;
  }
}