/* ===== Activarch / Design B — デザイントークン =====
   文字サイズ・色・2 つの書体の唯一の定義元。TOP ページ（index.html）も下層ページもすべて
   このファイルを最初に読み込む。特定の要素を対象にする記述はないので、どこで使っても安全。

   サイズは vw ベースに clamp をかけているので、スケール全体がビューポートに合わせて伸縮する。
   各行のコメントは 1440px 時の値で、これはデザインを決めた基準幅。新しいサイズを足すのは
   既存のどの段階にも合わないときだけ——ページは意図的にこれらの段階に絞ってある。 */
:root{
  /* --- 文字サイズ：役割ごとに 1 段階 ------------------------------------------------ */
  /* ページ全体をひとつで動かすレバー：下のすべてのサイズにこの値が掛かり、このファイルの外で
     決めている 2 つ——Hero のロックアップと社名（css/journey.css）、オープニングアニメーション
     （js/logo-intro.js）——にも掛かる。ラップトップではページがやや大きく見えたので、デスクトップ
     レイアウトは 1 段階下げる。スマホは 1 のまま（狭い構成向けにサイズを決めてあるため）。
     本文系の 3 サイズには下限があり、このレバーでもそれ以下には下がらない。 */
  --ui-scale: 1;

  --t-display:   calc(max(calc(28.9px + 4.59vw), 6.6vw) * var(--ui-scale));  /* 90px  セクションタイトル */
  --t-statement: calc(clamp(32px, 3.7vw, 60px) * var(--ui-scale));   /*  50px  大きな独立した 1 行 */
  --t-group:     calc(clamp(36px, 4.8vw, 78px) * var(--ui-scale));   /*  65px  英語タイトルの中間ランク。statement と display の間 */
  --t-headline:  calc(clamp(26px, 2.7vw, 44px) * var(--ui-scale));   /*  37px  セクションのリード、大きな数字 */
  --t-subhead:   calc(clamp(22px, 2.07vw, 34px) * var(--ui-scale));  /*  28px  カードとサービスの見出し */
  --t-title:     max(17px, calc(clamp(18px, 1.68vw, 27px) * var(--ui-scale)));  /*  23px  小見出し */
  --t-intro:     max(16px, calc(clamp(16px, 1.33vw, 21px) * var(--ui-scale)));  /*  18px  リード段落 */
  --t-body:      max(15px, calc(clamp(15px, 1.14vw, 17px) * var(--ui-scale)));  /*  16px  本文、ナビゲーション、ボタン */
  --t-caption:   14px;                       /*  14px  日付、クレジット、キャプション */
  --t-micro:     11px;                       /*  11px  メディア上のラベル：再生時間、スクロールの合図 */

  /* --- ウェイト：3 段階のみ。中間は設けない ----------------------------------------- */
  --w-body:   400;   /* 本文、キャプション、メニュー */
  --w-head:   500;   /* 見出しは意図的に軽めに抑える */
  --w-strong: 700;   /* 力強く伝えるべき行 */

  /* --- 書体 ------------------------------------------------------------------------ */
  /* サンセリフは、立体の欧文に Inter Tight、日本語に Noto Sans JP。ディスプレイ用の英語には
     Noto Serif Display のイタリック、その行を共有する日本語には後ろに Noto Serif JP（明朝）を
     置く。日本語は決してイタリックにしない——どちらの書体もかなに本物のイタリックを持たず、
     合成の斜体では別の声に聞こえてしまう——ので、英語が斜体セリフのところでも、隣の日本語は
     立体の明朝にする。 */
  --f-sans:  "Inter Tight", "Noto Sans JP", sans-serif;
  --f-serif: "Noto Serif Display", "Noto Serif JP", serif;
  /* ヘッダー（ナビゲーション、モバイルメニュー）とボタン：本文ウェイトの Inter Tight。
     独立した役割にしてあるので、--f-sans に触れずに変えられる。 */
  --f-ui:    "Inter Tight", "Noto Sans JP", sans-serif;

  /* --- 色 -------------------------------------------------------------------------- */
  --c-navy-deep: #05081c;   /* ページフィールドの最上部 */
  --c-navy:      #0c1a42;
  --c-blue:      #1644af;   /* ブランドブルー */
  --c-blue-mid:  #247fca;
  --c-cyan:      #40b7e9;   /* ページフィールドの最下部 */
  --c-orange:    #e65100;   /* ブランドオレンジ */
  --c-orange-lt: #ff8a3c;
  --c-deep:      #0e2f8e;   /* 明るい面の上の文字と塗り */
  --c-ink:       #163250;   /* 白地の本文 */
  --c-muted:     #617487;
  --c-pale:      #f0f7fc;
  --c-line:      #ccdfed;   /* 明るい面の上の細罫線 */
  /* Recruit ページの暖色で明るい面。TOP では一切使わない：TOP のフィールドは端から端まで青。
     Recruit は本文をクリームとサンドの上に置き、写真とオレンジが暖かく見えるようにし、
     青は冒頭と結びのために取っておく。 */
  --c-cream:     #faf6f0;
  --c-sand:      #f1e9dd;
  --c-line-warm: #e3d8c8;   /* クリーム地の細罫線 */

  /* --g-field は Hero 専用。深いネイビーは冒頭のためのもので、About Activarch で導きの光が
     ひらめいた後、TOP はネイビーの 2 ストップを完全に手放す。Hero 以降のすべてのページ——
     そして下層ページすべて——は --g-field-light を使う。 */
  --g-field: linear-gradient(180deg, #05081c, #0c1a42 15%, #1644af 34%, #247fca 64%, #40b7e9);
  --g-field-light: linear-gradient(180deg, #1644af, #247fca 48%, #40b7e9);
  /* カルチャーの引用文の背後にある暖色のフィールド。 */
  --g-warm: linear-gradient(115deg, #e35f0c 0%, #ee741e 30%, #f0924f 56%, #2d8ccf 86%, #40b7e9 100%);
}

/* デスクトップのみ：ラップトップではやや大きく見えたため。スマホは自分のサイズを保つ。 */
@media (min-width: 901px) {
  :root {
    --ui-scale: .82;
  }
}