/* =========================================================
   GlowUp Corporate — Design Tokens
   すべての色・文字・余白・角丸・影・動きの「元の値」はここだけに置く。
   部品(main.css)では必ずこの変数を使い、値を直接書かない。
   詳しい使い方: ../../../DESIGN-SYSTEM.md
   ========================================================= */

:root {
  /* ---------- 色: i-ne(https://i-ne.co.jp/)の色づかいに準拠(2026-10-16 枝川さん決定) ----------
     出典= i-ne.co.jp/wp-content/themes/i-ne/assets/entry-dfed7851.css の :root 変数(2026-10-16 実測)。
     WCAG AA(文字4.5:1)に届かない値だけ、色相はそのままで明度だけ下げた(→「調整」と書いたもの)。 */
  --color-bg:            #FFFFFF;  /* i-ne --color-background */
  --color-surface:       #F4F7F8;  /* i-ne --color-lightblue(会社概要の面) — 区切りの面・表の見出し列・フッター */
  --color-surface-2:     #F2F2F2;  /* i-ne 分類ラベルの地(.tag の実測値) — 分類ラベル・仮の画像枠 */
  --color-ink:           #222222;  /* i-ne --color-dark — 本文・見出し(白地15.9:1) */
  --color-ink-2:         #4D4D4D;  /* 派生: #222と#888の間の補足用(i-neに該当なし) — リード文・補足(白地8.5:1) */
  --color-ink-3:         #6B6B6B;  /* 調整: i-ne --color-gray #888(白地3.5:1で不足)→明度だけ下げ — 日付・注記(白5.3・各面4.6以上) */
  --color-line:          #E4E4E4;  /* i-ne --color-border — 罫線(文字には使わない) */
  --color-line-strong:   #888888;  /* i-ne --color-gray をそのまま — 入力欄の枠(文字ではないので3:1以上で可・白地3.5:1) */

  /* ---------- 色: アクセント(1色だけ) ---------- */
  --color-accent:        #1E7590;  /* 調整: i-ne --color-accent #23819F(白地4.46:1で不足)→明度だけ下げ — リンク・主ボタン・現在地(白5.3/各面4.5以上) */
  --color-accent-hover:  #185E73;  /* さらに暗く(押す前の手応え) */
  --color-accent-original: #23819F;/* i-ne --color-accent そのもの — 文字以外の飾り(点・線)だけに使う */
  --color-accent-grad:   linear-gradient(135deg, #23819F 0%, #3EA6B4 100%); /* i-ne --color-grad-diagonal — 文字を載せない飾りだけ */
  --color-accent-soft:   #E3F0F4;  /* 派生: アクセントのうすい色 — 選択中のチップ・フォーカスの輪 */
  --color-on-accent:     #FFFFFF;  /* アクセントの上の白文字(5.3:1) */

  /* ---------- 色: SHOJIKI紹介用(ブランドページの黒い面だけ) ---------- */
  --color-brand-bg:      #0E0F10;
  --color-brand-ink:     #F2F2F0;  /* 黒地で17.1:1 */
  --color-brand-ink-2:   #A3A6AB;  /* 黒地で7.9:1 */
  --color-brand-line:    #2A2C2F;

  /* ---------- 色: 状態 ---------- */
  --color-error:         #B0262B;  /* 白地で6.7:1 */
  --color-tbc-bg:        #FFF4D6;  /* 【要確認】の印(公開前に必ず消える色) */
  --color-tbc-ink:       #7A5C1E;  /* 6.2:1 */
  --color-focus:         #1E7590;

  /* ---------- 文字: 書体 ----------
     英字=Inter、和文=Noto Sans JP(どちらも SIL Open Font License 1.1・無料)。
     読み込みに失敗しても、各OSのゴシック体で同じ見た目に近づくよう並べる。 */
  --font-sans: "Inter", "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN",
               "Yu Gothic UI", "Yu Gothic", "Meiryo", system-ui, sans-serif;
  --font-latin: "Inter", "Helvetica Neue", Arial, system-ui, sans-serif;  /* 英字ラベル・数字 */

  /* ---------- 文字: 太さ(読み込むのは400/500/600〜700だけ) ---------- */
  --fw-regular: 400;
  --fw-medium:  500;
  --fw-bold:    700;   /* 和文の小見出し。英字はInter 600に寄る */

  /* ---------- 文字: 大きさ(スマホ→PCで滑らかに変わる) ---------- */
  --fs-display: clamp(2.125rem, 1.55rem + 2.6vw, 3.75rem); /* 34→60px トップのHERO */
  --fs-h1:      clamp(1.75rem, 1.45rem + 1.4vw, 2.625rem);  /* 28→42px 各ページの題 */
  --fs-h2:      clamp(1.375rem, 1.2rem + 0.8vw, 1.875rem);  /* 22→30px セクション見出し */
  --fs-h3:      clamp(1.125rem, 1.07rem + 0.25vw, 1.25rem); /* 18→20px カード・小見出し */
  --fs-lead:    clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);    /* 17→20px リード文 */
  --fs-body:    1rem;        /* 16px 本文(スマホでも下げない) */
  --fs-small:   0.875rem;    /* 14px 補足・表 */
  --fs-caption: 0.75rem;     /* 12px 英字ラベル・注記(これより小さくしない) */

  /* ---------- 文字: 行間・字間 ---------- */
  --lh-tight: 1.35;   /* 大見出し */
  --lh-snug:  1.55;   /* 小見出し・カードの題 */
  --lh-body:  1.9;    /* 和文の本文(広め) */
  --lh-body-en: 1.65; /* 英文の本文 */
  --ls-body:  0.04em; /* 和文の本文 */
  --ls-head:  0.02em; /* 和文の見出し */
  --ls-en-head: -0.01em;
  --ls-label: 0.14em; /* 英字ラベル(大文字) */

  /* ---------- 余白(4pxの倍数) ---------- */
  --sp-1: 4px;   --sp-2: 8px;   --sp-3: 12px;  --sp-4: 16px;
  --sp-5: 24px;  --sp-6: 32px;  --sp-7: 48px;  --sp-8: 64px;
  --sp-9: 96px;  --sp-10: 128px;
  --section-y: clamp(72px, 6vw + 40px, 144px);  /* セクションの上下 */
  --gutter:    clamp(20px, 4vw, 48px);          /* 画面の左右の余白 */
  --container: 1200px;   /* 一番広い幅 */
  --container-narrow: 760px; /* 文章を読ませる幅 */
  --header-h: 72px;

  /* ---------- 角丸 ---------- */
  --radius-sm: 4px;   /* ボタン・入力欄・チップ */
  --radius-md: 8px;   /* カード・仮の画像枠 */
  --radius-pill: 999px; /* 分類ラベル */

  /* ---------- 影(ほぼ使わない。線で区切る) ---------- */
  --shadow-header: 0 1px 0 var(--color-line);
  --shadow-raise:  0 8px 24px rgba(22, 25, 29, 0.08); /* カードにマウスを乗せたときだけ */

  /* ---------- 動き(静かに・短く) ---------- */
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --dur-1: 160ms;  /* 色の変化 */
  --dur-2: 240ms;  /* メニューの開閉 */
  --dur-3: 480ms;  /* 表示時のふわっと(使うなら) */

  /* ---------- 重なり順 ---------- */
  --z-header: 50;
  --z-menu: 60;
}


/* 動きを減らす設定の人には動かさない */
@media (prefers-reduced-motion: reduce) {
  :root { --dur-1: 0ms; --dur-2: 0ms; --dur-3: 0ms; }
}