/*
  AI Innovation 部 — Light Design Tokens

  原本デザイン: docs/index-1-light.html
  白ベース（--bg: #ffffff）に、パープル／ピンク／アンバー／シアンの
  4色パレットをグラデーションで効かせたビビッドなライトテーマ。

  詳細な用途・使用ルールは design-system.md を参照。
  コンポーネント実装は components.css（このファイルの後に読み込むこと）。
*/

:root {
  /* --- Color: base --- */
  --bg: #ffffff;      /* ページ背景（基調） */
  --bg2: #f4f2ff;     /* セクション背景・パネル面（淡いラベンダー） */
  --panel: #f4f2ff;   /* feature panel 等の面背景（= --bg2） */
  --line: #e7e3f7;    /* ボーダー・区切り線 */
  --line-on-accent: rgba(255, 255, 255, .28);  /* アクセント面（カラーカード）上の区切り線 */
  --panel-on-accent: rgba(255, 255, 255, .16); /* 同・面（ラベル等の地色） */
  --ink: #0d0b1f;     /* 反転ブロック（.big）の背景 */
  --overlay: rgba(13, 11, 31, .55); /* モーダルの背景（--ink の55%） */

  /* --- Color: text --- */
  --txt: #0d0b1f;          /* 基本テキスト */
  --muted: #5b5776;        /* 補助テキスト */
  --txt-on-ink: #ffffff;   /* --ink 背景上のテキスト */
  --muted-on-ink: #b7b2d6; /* --ink 背景上の補助テキスト */
  --txt-on-accent: #ffffff;/* アクセント面（カラーカード・CTA・btn-p）上のテキスト */

  /* --- Color: palette（4色アクセント） --- */
  --p1: #7c3aed;  /* パープル。主アクセント（ロゴ・pill・btn-p 起点） */
  --p2: #ec4899;  /* ピンク。第2アクセント（eyebrow・グラデーション終端） */
  --p3: #f59e0b;  /* アンバー。グラデーション文字の3色目 */
  --p4: #06b6d4;  /* シアン。カード4色目 */

  /* パレットの明側（カードグラデーションの終端） */
  --p1-light: #a855f7;
  --p2-light: #f472b6;
  --p3-light: #fbbf24;
  --p4-light: #22d3ee;

  /* セマンティックな別名 */
  --accent: var(--p1);
  --accent2: var(--p2);

  /* --- Gradients --- */
  /* 文字グラデーション（.gr / .gr2〜.gr5）。同じ配色が続くと単調になるため、
     セクションごとに使い分ける。読みやすさのため、弱い色（--p3 / --p4）は
     終端側にだけ置き、語の先頭には濃い --p1 / --p2 を置く */
  --gradient-text: linear-gradient(100deg, var(--p1), var(--p2) 55%, var(--p3)); /* .gr（3色・ヒーロー） */
  --gradient-text-2: linear-gradient(100deg, var(--p1), var(--p4));              /* .gr2 パープル→シアン */
  --gradient-text-3: linear-gradient(100deg, var(--p2), var(--p1));              /* .gr3 ピンク→パープル */
  --gradient-text-4: linear-gradient(100deg, var(--p2), var(--p4));              /* .gr4 ピンク→シアン */
  --gradient-text-5: linear-gradient(100deg, var(--p1), var(--p4) 55%, var(--p2)); /* .gr5 3色・パープル→シアン→ピンク */
  --gradient-btn: linear-gradient(100deg, var(--p1), var(--p2));                 /* .btn-p */
  --gradient-cta: linear-gradient(110deg, var(--p1), var(--p2));                 /* .cta 面 */
  --gradient-card-1: linear-gradient(150deg, var(--p1), var(--p1-light));
  --gradient-card-2: linear-gradient(150deg, var(--p2), var(--p2-light));
  --gradient-card-3: linear-gradient(150deg, var(--p3), var(--p3-light));
  --gradient-card-4: linear-gradient(150deg, var(--p4), var(--p4-light));

  /* --- Hero 背景（3層の放射グラデーション） --- */
  --hero-bg:
    radial-gradient(720px 420px at 82% -6%, rgba(236, 72, 153, .18), transparent 62%),
    radial-gradient(680px 420px at -6% 60%, rgba(124, 58, 237, .16), transparent 60%),
    radial-gradient(540px 360px at 60% 120%, rgba(6, 182, 212, .14), transparent 62%);

  /* --- Shadow --- */
  --shadow-btn: 0 10px 30px rgba(124, 58, 237, .35);   /* --p1 の35% */
  --shadow-modal: 0 30px 90px rgba(13, 11, 31, .35);   /* --ink の35% */
  --shadow-panel: 0 2px 14px -6px rgba(13, 11, 31, .16);        /* 白パネル（.cat-group）。白背景でも面が沈まないように */
  --shadow-card: 0 14px 34px -14px rgba(13, 11, 31, .30);       /* カラーカードの接地感 */
  --shadow-card-hover: 0 28px 54px -18px rgba(13, 11, 31, .38); /* 同・ホバー時 */

  /* --- Radius scale --- */
  --radius-sm: 14px;    /* 小さい面 */
  --radius-md: 22px;    /* feature panel (.w) */
  --radius-lg: 26px;    /* card */
  --radius-xl: 32px;    /* 反転ブロック (.big) */
  --radius-2xl: 34px;   /* cta */
  --radius-pill: 999px; /* button, pill, mtag */

  /* --- Spacing --- */
  --content-max-width: 1140px;
  --content-padding-x: 24px;
  --section-padding-y: 100px;
  --nav-height: 70px;
  /* sticky な要素（6.14 の .cat-nav 等）が張り付く位置。既定はナビの高さ。
     ナビの高さを変えるページは、custom.css 側でこの値も上書きする */
  --sticky-top: var(--nav-height);
  --gap-grid: 24px;   /* .cards */
  --gap-feat: 26px;   /* .why */
  --gap-stats: 40px;  /* .bigrow */
  /* .modal の寸法上限。none は「四方 --modal-gap を除いた全面」を意味する。
     幅は読みやすさのため固定し、広い画面では左右の余白が増える。
     高さは縦に長い内容（iframe）を使い切るため制限しない */
  --modal-max-width: 1180px;
  --modal-max-height: none;

  /* --- Typography --- */
  --font-family-base: "Helvetica Neue", "Hiragino Sans", "Noto Sans JP", -apple-system, sans-serif;
  --line-height-base: 1.7;
  --line-height-h1: .98;      /* ヒーロー見出し */
  --line-height-heading: 1.05; /* セクション見出し・CTA見出し */

  /* --- Motion --- */
  --transition-fast: .2s;
  --transition-base: .25s;
}

/* --- Breakpoints (参考: メディアクエリ内で直接数値指定) ---
   md: max-width 820px — nav-links非表示、cards/why/bigrow を1カラム化
*/