/* ===========================================================
   connectera3 — Design Tokens
   根拠: design-tokens.md / brand-worldview.md
   原則: このファイルに無い値をコンポーネントCSSに直書きしない

   2026-07-29 全面改訂 — connectera-renewal の「本番テーマ」に統合。
   統一先: ~/Local Sites/connectera-renewal/app/public/wp-content/
           themes/base-corporate-theme/assets/scss/pages/_cnt-base.scss
   （/services/ と /cases/ が実装済みなのはプロトタイプではなく本番テーマ側）

   参照サイト分析（jp.is-kagami.com / midcareer-recruit.ga-tech.co.jp）から
   取り込んだ規約:
     - 影は全部ブランドカラーの青。グレーの影を使わない（is-kagami）
     - 角丸は4隅を同じにしない。非対称ペアを反転させて使う（is-kagami）
     - 行間を二極化する。見出し1.3 / 長文2.2。中間値を作らない（is-kagami）
     - 濃色の地は全体の10〜15%まで。使い過ぎると逆に単調になる（両サイト）
   =========================================================== */

:root {
  /* -------- Color: base ---------------------------------- */
  /* 地は白・淡青で80%以上（brand-worldview §7）。濃紺は Catch とフッターのみ */
  --c-paper:      #ffffff;   /* renewal: --bg */
  --c-surface:    #f4f7fc;   /* renewal: --surface。カード地・帯 */
  --c-pale:       #ebf5fd;   /* About / Works のセクション地 */
  --c-pale-deep:  #e0f2fe;   /* パネル内の一段濃い淡青 */

  /* 濃紺 — 地色の反転はページ内で1回だけ（Catch）。フッターも同色 */
  /* renewal の s04 グラデ（#0b1533→#16306e）とフッターが既に持つ色域。新設ではない */
  --c-deep:       #0a2540;
  --c-deep-soft:  #123553;   /* 濃紺面の中でわずかに起伏をつけるとき */

  /* -------- Color: ink ----------------------------------- */
  --c-ink:        #1a1a1a;   /* renewal: --ink。本文 */
  --c-fg:         #0f1b33;   /* renewal: --fg。見出し。墨より青みが強い */
  --c-ink-muted:  #5b6577;   /* renewal: --muted */
  --c-ink-faint:  #76a4ba;   /* メタ情報のラベル側 */
  --c-ink-on-dark:#b8c6d6;   /* 濃紺の上の補助文字 */

  /* -------- Color: brand --------------------------------- */
  --c-brand:      #0175cf;   /* /services/ /cases/ と同値。TOPの #1c46d1 上書きは廃止 */
  --c-brand-deep: #015fa8;   /* renewal: --accent-deep */
  --c-brand-soft: #6fb3e6;   /* 粒子の淡階調 */
  --c-brand-on-dark:#57abe2; /* 濃紺の上のブランド色 */

  /* -------- Color: accent (面積 1% 未満) ----------------- */
  --c-accent:     #f95743;

  /* -------- Color: line ---------------------------------- */
  --c-line:       #e3e9f2;   /* renewal: --border */
  --c-line-on-dark: rgba(255, 255, 255, .16);

  /* -------- Icon (mask 用・アセット0KBを維持) ------------- */
  /* 二重シェブロン「≫」。mask で使うので stroke の色は何でもよい */
  --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 6 6 6-6 6'/%3E%3Cpath d='m13 6 6 6-6 6'/%3E%3C/svg%3E");

  /* -------- Gradient ------------------------------------- */
  /* is-kagami は3種しか定義していない。増やさない */
  --g-brand:  linear-gradient(90deg, var(--c-brand-deep) 0%, var(--c-brand) 100%);
  --g-deep:   linear-gradient(120deg, var(--c-deep) 0%, #16407a 60%, var(--c-brand-deep) 100%);

  /* -------- Typography: family --------------------------- */
  /* テーマの renewal レイヤ（assets/scss/renewal/_tokens.scss）と同値。
     移行済み7ページと書体を揃えるため。フォント自体は inc/renewal.php が
     読み込むので、このテンプレートからは読まない */
  --f-en:  "Archivo", system-ui, sans-serif;
  --f-ja:  YakuHanJP, "Zen Kaku Gothic New", "Noto Sans JP", -apple-system,
           BlinkMacSystemFont, "Hiragino Sans", Meiryo, sans-serif;

  /* -------- Typography: fluid scale ---------------------- */
  /* 見出しは2段階。「小さい導入句 → 大きい結論」で必ず段差をつける（is-kagami）。
     大きい方は weight を1段落として、太さの視覚重量を揃える */
  --t-h-lead:  clamp(22px, 16px + 1.5vw, 42px);   /* 導入句。weight 700 */
  --t-h-main:  clamp(30px, 18px + 3.0vw, 60px);   /* 結論。weight 600 */
  --t-h2:      clamp(20px, 15px + 1.4vw, 30px);   /* カード見出し */
  --t-h3:      clamp(17px, 15.2px + .47vw, 24px);
  --t-lead:    clamp(16px, 15px + .3vw, 18px);
  --t-body:    16px;
  --t-body-sm: 14px;
  --t-small:   12px;
  --t-label:   18px;                              /* セクションラベル（部品①） */
  --t-num:     clamp(40px, 24px + 3.4vw, 72px);   /* 数字リスト行の巨大番号 */
  --t-metric:  clamp(28px, 18px + 2.2vw, 44px);   /* 実績の数値 */

  /* -------- Typography: metrics -------------------------- */
  /* 行間は二極化する。中間値（1.7前後）を作らない */
  --lh-head:    1.3;    /* 見出し */
  --lh-head-lg: 1.4;    /* 大見出し（60px級）は少し開ける */
  --lh-tight:   1.15;   /* 英字の塊 */
  --lh-long:    2.2;    /* 長い本文。BtoBの読み物量に耐える */
  --lh-short:   1.6;    /* 短文・カード本文 */

  --ls-tight:  -.01em;  /* 大きい和文見出し */
  --ls-en:     -.02em;
  --ls-label:   .16em;  /* 英字ラベルのみ大きく開く */

  --fw-normal: 400;
  --fw-medium: 500;
  --fw-bold:   700;
  --fw-black:  900;

  /* -------- Layout --------------------------------------- */
  --w-container: 1240px;                          /* renewal の --container と同値 */
  --gutter:      clamp(1rem, 4vw, 2.5rem);        /* renewal と同値 */
  --w-narrow:    760px;                           /* 本文の可読幅 */
  --bp:          900px;

  /* 非対称2カラム。50:50 をやめるだけで「レイアウトした」感が出る（ga-tech） */
  --col-side:  26%;
  --col-main:  74%;
  --col-gap:   clamp(2rem, 5vw, 6rem);

  /* ✕型パネルの脚。左の注記と右の空きを同じ高さにして、
     左右のカードの高さを揃える（style.css の .cross__note / ::after が参照） */
  --cross-foot: 44px;

  /* -------- Spacing -------------------------------------- */
  --s-1:  4px;   --s-2:  8px;   --s-3:  12px;  --s-4:  16px;
  --s-5:  24px;  --s-6:  32px;  --s-7:  40px;  --s-8:  56px;
  --s-9:  80px;  --s-10: 120px;

  /* 2026-07-29 圧縮。1440px で 159px → 116px（-27%） */
  --s-section:      clamp(64px, 38px + 5.4vw, 130px);
  /* Catch 専用。ここは「山」なので全体の10〜15%の高さを確保する
     （両参照サイトとも濃色の反転は全体の8〜14%に収めている） */
  --s-section-void: clamp(150px, 84px + 14vw, 300px);

  /* -------- Motion --------------------------------------- */
  /* 参照2サイトとも「1つの動きは1軸のみ」「bounce/overshoot ゼロ」。
     is-kagami は GSAP すら使わず、リビールの51%が opacity だけで成立している */
  --ease-reveal: cubic-bezier(.4, .4, 0, 1);        /* 出現。入りが速く終わりが長い */
  --ease-wipe:   cubic-bezier(.475, .425, 0, .995); /* 面の展開。clip-path 専用 */
  --ease-ui:     cubic-bezier(.22, 1, .36, 1);      /* hover など即応 */

  --dur-hover:  .2s;
  --dur-base:   .4s;
  --dur-reveal: .7s;
  --dur-wipe:  1.5s;
  --dur-slow:  1.4s;    /* WebGL のフェードイン */

  --stagger:      100ms; /* DOM順に立ち上げる間隔 */
  --lerp:         0.08;  /* JS補間係数 */
  --reveal-shift: 20px;  /* 移動量。これ以上大きくしない */

  /* -------- Elevation ------------------------------------ */
  /* 影は全部ブランドカラーの青。グレーの影は使わない。
     色面積を増やさずに「青いサイト」の印象を強められる（is-kagami） */
  --shadow-card:  0 4px 40px rgba(1, 117, 207, .15);
  --shadow-raise: 0 16px 44px rgba(1, 117, 207, .22);
  --shadow-btn:   0 4px 50px rgba(1, 117, 207, .40);
  --shadow-on-dark: 0 16px 40px rgba(0, 0, 0, .35);

  /* -------- Radius --------------------------------------- */
  /* 4隅を全部同じにしない。セクションが変わるたびペアを反転させる。
     「同じ部品なのに同じに見えない」を CSS 1プロパティで作る（is-kagami） */
  --r-card:     8px 40px;      /* 左上8 / 右上40 / 右下8 / 左下40 */
  --r-card-alt: 40px 8px;      /* 反転 */
  --r-panel:    100px 0 0 0;   /* 片側だけ巨大角丸。右ブリードのパネル用 */
  --r-thumb:    8px 24px 8px 8px;
  --r-sm:    8px;
  --r-md:   16px;
  --r-lg:   24px;
  --r-pill: 999px;

  /* -------- Z-index -------------------------------------- */
  --z-bg:        0; /* 濃紺バックドロップ */
  --z-bg-canvas: 1; /* WebGL粒子キャンバス。バックドロップの上・本文の下 */
  --z-base:      2;
  --z-header: 200;
  --z-modal:  300;
}

/* ===========================================================
   Reduced motion — 装飾ではなく要件
   =========================================================== */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-hover:  0.01ms;
    --dur-base:   0.01ms;
    --dur-reveal: 0.01ms;
    --dur-wipe:   0.01ms;
    --dur-slow:   0.01ms;
    --stagger:    0ms;
    --reveal-shift: 0px;
  }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}