/* ============================================================
   tokens.css — 設計値の唯一の置き場
   採寸元: design/dc-src/*.dc.html（Claude Design キャンバス）
   見た目の確認: design/xd-exports/*.png（XDカンプ）
   ここにない値をCSSへ直接書かない
   ============================================================ */

:root {
  /* --- 色（実体） ------------------------------------------ */
  --color-bg:            #0a0b0b;  /* 基本の背景（黒） */
  --color-bg-raise:      #121413;  /* 一段明るい黒 */
  --color-bg-sink:       #0d0f0e;  /* 一段沈んだ黒 */
  --color-bg-footer:     #141414;  /* フッター */
  --color-bg-cta-from:   #101211;  /* CTAグラデーション始点 */
  --color-bg-cta-to:     #08090a;  /* CTAグラデーション終点 */
  --color-bg-light:      #f4f4f2;  /* 白背景セクション */
  --color-bg-light-2:    #f7f7f5;  /* 白背景セクション（明） */
  --color-bg-light-3:    #e6e6e6;  /* 白背景セクション（灰）：XD実測 rgb(230,230,230） */
  --color-bg-article:    #efefec;  /* 記事本文・フォームの地 */
  --color-bg-card:       #fafaf8;  /* ポリシーカード */
  --color-bg-note:       #eef1f4;  /* 連絡先の囲み */
  --color-bg-band:       #131513;  /* 細いCTA帯 */
  --color-bg-history:    #0f110f;  /* 沿革 */
  --color-bg-point:      #171917;  /* 施工のポイント */
  --color-bg-panel:      #1e1e1d;  /* 採用：メッセージ・仕事内容の帯（カンプ実測） */

  --color-accent:        #fb8a02;  /* オレンジ（カンプ実測 #fc8500〜#ff8b04 の中央値） */
  --color-accent-deep:   #f98d00;  /* オレンジ（白背景のラベル用・カンプ実測） */
  --color-accent-num:    #fb8a02;  /* オレンジ（連番・アクセントと同じ） */
  --color-logo:          #3fbfa6;  /* ロゴのミントグリーン */
  --color-accent-hover:  #ffa02a;  /* オレンジボタンのホバー */
  --color-on-accent:     #1a1207;  /* オレンジ地の上の文字 */
  --color-check:         #2fae95;  /* チェックの丸 */

  --color-shine-from:    #ffffff;  /* 大見出しグラデーション始点 */
  --color-shine-to:      #8e9694;  /* 大見出しグラデーション終点 */
  --color-shine-to-alt:  #8b9391;  /* 同上（CTA用） */

  /* --- 色（不透明度を変えて使う） --------------------------- */
  --rgb-light: 242 243 242;  /* 明色（黒背景の文字・罫線） */
  --rgb-dark:   18  20  19;  /* 暗色（白背景の文字・罫線） */
  --rgb-ink:    10  11  11;  /* ヘッダー背景など */
  --rgb-accent:251 138   2;  /* アクセント色（薄い罫線に使う） */

  --color-text:            rgb(var(--rgb-light));
  --color-text-93:         rgb(var(--rgb-light) / .93);  /* XD実測：下層ヒーローの本文（218〜246の中央） */
  --color-text-90:         rgb(var(--rgb-light) / .9);
  --color-text-85:         rgb(var(--rgb-light) / .85);
  --color-text-80:         rgb(var(--rgb-light) / .8);   /* XD実測：トップの強みの見出し */
  --color-text-72:         rgb(var(--rgb-light) / .72);
  --color-text-62:         rgb(var(--rgb-light) / .62);
  --color-text-45:         rgb(var(--rgb-light) / .45);
  --color-line:            rgb(var(--rgb-light) / .14);
  --color-line-accent:     rgb(var(--rgb-accent) / .22);  /* XD実測：黒背景の上で rgb(65,43,13) */
  --color-line-strong:     rgb(var(--rgb-light) / .4);
  --color-line-faint:      rgb(var(--rgb-light) / .08);

  --color-text-dark:       rgb(var(--rgb-dark));
  --color-text-dark-85:    rgb(var(--rgb-dark) / .85);  /* XD実測：会社概要の表の文字 rgb(50,49,48) */
  --color-text-dark-72:    rgb(var(--rgb-dark) / .72);
  --color-text-dark-66:    rgb(var(--rgb-dark) / .66);
  --color-line-dark:       rgb(var(--rgb-dark) / .14);

  --color-accent-wash:     rgb(251 138 2 / .1);    /* ボタンのホバー地 */
  --color-header-bg:       rgb(var(--rgb-ink) / .96);

  /* --- 書体 ------------------------------------------------ */
  --font-en: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --font-jp: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  --font-display: "M PLUS 1", "Noto Sans JP", "Hiragino Kaku Gothic ProN", sans-serif;
  --font-display-en: "Inter", "Helvetica Neue", Arial, sans-serif;
  /* 明朝体。使うのはトップの .c-hero__title だけ（2026-09-14 園田さん指示） */
  --font-serif: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", serif;

  --fw-normal:   400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-heavy:    800;
  --fw-black:    900;

  /* --- 文字サイズ ------------------------------------------
     XDは1920px設計。カンプで文字の実幅を測ると、dc.html（約1180px設計）の
     値をそのまま使うと1920pxで約1.45〜1.6倍小さかったため、
     画面幅に応じて伸びる形にして1920pxでカンプに一致させる       */
  /* 1239px以下は読みやすさ優先の固定値にする（2026-09-07）。
     大手建設会社4社のスマホ表示を実測したところ本文は14〜16pxで、
     XDの1920px設計をそのまま比例縮小した10〜13pxでは小さすぎるため。
     1240px以上は下の @media でXD比例のclampに戻す（1920pxの見た目は変えない） */
  --fs-3xs: 0.75rem;      /* 12px */
  --fs-2xs: 0.9375rem;    /* 15px 本文 */
  --fs-xs:  0.9375rem;    /* 15px 補足文 */
  --fs-sm:  0.9375rem;    /* 15px 本文（小） */
  --fs-md:  1rem;         /* 16px 本文（標準） */
  --fs-lg:  1.125rem;     /* 18px リード文・小見出し */
  --fs-xl:  1.25rem;      /* 20px カード見出し */
  --fs-2xl: 1.375rem;     /* 22px 強調リード */
  --fs-3xl: 1.625rem;     /* 26px 見出し（小） */
  --fs-4xl: 2rem;         /* 32px ロゴ・見出し */

  /* --- 文字サイズ（画面幅で伸びる） ------------------------ */
  --fs-hero:    clamp(3.25rem, 6.44vw, 10.125rem);  /* 52 → 162px トップのh1（XD実測 1文字140×152px） */
  --fs-display: clamp(4.5rem, 14.1vw, 16.9rem);     /* 72 → 270px WORKS */
  --fs-cta:     clamp(2.875rem, 6.54vw, 7.94rem);   /* 46 → 126px BUILD WITH CARE.（XD実測 幅1375px） */
  --fs-h2:      clamp(1.875rem, 3.25vw, 3.9rem);    /* 30 → 62px 見出し */
  --fs-h2-sm:   clamp(1.75rem, 2.75vw, 3.3rem);     /* 28 → 53px 見出し（小） */
  --fs-lead:    clamp(1.0625rem, 1.6vw, 1.875rem);  /* 17 → 30px リード文 */
  --fs-num:     2rem;                               /* 32px 連番（1239px以下。24pxでは小さいため）*/
  --fs-recruit-hero:  clamp(2.25rem, 4.86vw, 6.5rem);  /* 36 → 104px 採用の大見出し（カンプ1440pxで70px） */
  --fs-recruit-num:   clamp(1.875rem, 3.9vw, 5.25rem); /* 30 → 84px 採用の数字（カンプ1440pxで56px） */
  --fs-recruit-title: clamp(1.5rem, 3.06vw, 4rem);     /* 24 → 64px 採用の見出し（明朝・カンプ1440pxで44px） */

}

/* 1240px以上はXDの比例（1920pxでカンプ一致）に戻す */
@media (min-width: 1240px) {
  :root {
    --fs-3xs: clamp(0.625rem,  0.85vw, 1rem);       /* 10 → 16px */
    --fs-2xs: clamp(0.6875rem, 0.85vw, 1rem);       /* 11 → 16px */
    --fs-xs:  clamp(0.75rem,   0.95vw, 1.125rem);   /* 12 → 18px */
    --fs-sm:  clamp(0.8125rem, 1.05vw, 1.25rem);    /* 13 → 20px */
    --fs-md:  clamp(0.875rem,  1.2vw,  1.4375rem);  /* 14 → 23px */
    --fs-lg:  clamp(1rem,      1.35vw, 1.625rem);   /* 16 → 26px */
    --fs-xl:  clamp(1.1875rem, 1.5vw,  1.8125rem);  /* 19 → 29px */
    --fs-2xl: clamp(1.3125rem, 1.6vw,  2rem);       /* 21 → 31px */
    --fs-3xl: clamp(1.5625rem, 1.9vw,  2.25rem);    /* 25 → 36px */
    --fs-4xl: clamp(2rem,      2.4vw,  2.875rem);   /* 32 → 46px */
    --fs-num: clamp(1.5rem, 2.78vw, 3.34rem);       /* 24 → 53px 連番（XD実測 高さ36〜41px） */
  }
}

:root {
  /* --- 行間 ------------------------------------------------ */
  --lh-tight:  1.07;
  --lh-snug:   1.42;
  --lh-normal: 1.9;
  --lh-body:   2;
  --lh-loose:  2.15;

  /* --- 字間 ------------------------------------------------ */
  --ls-tight:  -0.01em;
  --ls-xs:     0.04em;
  --ls-sm:     0.05em;
  --ls-md:     0.06em;
  --ls-lg:     0.08em;
  --ls-xl:     0.12em;
  --ls-2xl:    0.14em;
  --ls-wide:   0.34em;  /* セクションラベル */
  --ls-hero:   0.42em;  /* BUILD WITH CARE */

  /* --- 余白 ------------------------------------------------ */
  --space-1:  0.25rem;  /*  4px */
  --space-2:  0.5rem;   /*  8px */
  --space-3:  0.75rem;  /* 12px */
  --space-4:  1rem;     /* 16px */
  --space-5:  1.25rem;  /* 20px */
  --space-6:  1.5rem;   /* 24px */
  --space-7:  1.75rem;  /* 28px */
  --space-8:  2rem;     /* 32px */
  --space-9:  2.25rem;  /* 36px */
  --space-10: 2.5rem;   /* 40px */
  --space-12: 3rem;     /* 48px */
  --space-14: 3.5rem;   /* 56px */
  --space-16: 4rem;     /* 64px */
  --space-20: 5rem;     /* 80px */
  --space-22: 5.5rem;   /* 88px */
  --space-24: 6rem;     /* 96px */

  /* --- レイアウト ------------------------------------------ */
  --gutter:    clamp(1.25rem, 5vw, 6rem); /* 20 → 96px：カンプ実測で画面の約5% */
  --container: 108rem;                    /* 1728px：1920 − 左右96px */
  --header-h:  4.25rem;          /* 68px：ヘッダーの実測の高さ。重なるぶんの逃げに使う */

  /* --- 動き ------------------------------------------------ */
  --ease: cubic-bezier(.7, 0, .3, 1);
  --dur:  .3s;
}

@media (min-width: 768px) {
  /* 768→94px / 1240→123px / 1920→146px。実測に合わせた式 */
  :root { --header-h: clamp(5.875rem, 5.07rem + 3.38vw, 9.125rem); }
}