/* =================================================================
 * Home Renewal Design Tokens
 *
 * 新トップページ専用のデザイン変数。Figma の変数名に揃えている。
 * `.home-page` / `.home-shell` / `.home-drawer` / `.home-menu`（後ろ 2 つは body 直下に
 * Teleport）にスコープし、既存ページの variables.css には影響を与えない。
 *
 * ⚠️ html { font-size: 10px } が variables.css で固定されているため、
 *    このページでは rem を使わず px トークンで組む。
 *
 * ブレークポイント（CSS 変数は @media で使えないので直書き。変更時は
 * HomeShell.vue / HomeHeader.vue / HomeSidebar.vue の @media も合わせて変更すること）:
 *   767px 以下  … 中央カラムを画面幅いっぱいに（--hp-content-width を 100vw に上書き）
 *   768〜1023px … 420px のカラムを白地の上で中央配置（装飾なし）
 *   1024px … 淡い背景の上に SP カラムを中央配置 + 右サイドバー。ハンバーガーは非表示（PC）
 *   1200px … サイドバーの余白を広げる
 * ================================================================= */

.home-page,
.home-shell,
.home-drawer,
.home-menu {
  /* --- Colors: brand --- */
  --hp-primary-600: #2c7a6b;
  --hp-primary-500: #008385;
  --hp-primary-400: #00a8aa;
  --hp-primary-300: #06beb6;
  --hp-primary-200: #48b1bf;
  --hp-primary-150: #d2eaec;
  --hp-primary-100: #e8f4f5;
  --hp-primary-50: #f3fdfe;
  --hp-primary-25: #f7feff;

  /* --- Colors: neutral --- */
  --hp-neutral-400: #1f3438;
  --hp-neutral-300: #3e5155;
  --hp-neutral-200: #506f76;
  --hp-neutral-150: #4c5d5b;
  --hp-neutral-100: #6e8a83;
  --hp-gray-400: #9e9e9e;
  --hp-line: #cae3e5;
  --hp-white: #ffffff;

  /* --- Colors: semantic --- */
  --hp-error: #fc5353;
  --hp-coral: #f47458;
  --hp-gold: #cdab7c;
  --hp-cream: #fffbeb;
  --hp-highlight: #ffe893;
  --hp-text-primary-70: rgba(0, 0, 0, 0.7);

  /* --- Colors: profile tag palette（ペルソナタグ ColorPattern） --- */
  --hp-tag-coral-bg: #feede7;
  --hp-tag-coral-text: #ea585a;
  --hp-tag-pink-bg: #ffecf1;
  --hp-tag-pink-text: #e55e7a;
  --hp-tag-mint-bg: #e6f7f3;
  --hp-tag-mint-text: #1f9e83;
  --hp-tag-sky-bg: #e8f1fb;
  --hp-tag-sky-text: #3a7bd5;
  --hp-tag-lavender-bg: #f0ebfb;
  --hp-tag-lavender-text: #7b5ccf;
  --hp-tag-sand-bg: #fbf3e4;
  --hp-tag-sand-text: #c48a2a;
  --hp-text: var(--hp-neutral-400);
  --hp-text-sub: var(--hp-neutral-300);
  --hp-text-muted: var(--hp-neutral-200);
  /* フォームのラベル（Figma FormItem の #101413。本文より一段濃い） */
  --hp-text-strong: #101413;
  --hp-accent: var(--hp-primary-400);
  /* 外部メディアの掲載記事（iCoi Media）。ブランドのティールと区別する青（tag-sky と同系） */
  --hp-accent-external: var(--hp-tag-sky-text);
  /* 入力欄の枠線（Figma FormItem の #CFE5DE。--hp-line より僅かに緑寄り） */
  --hp-field-line: #cfe5de;

  /* --- Gradients --- */
  --hp-gradient-primary: linear-gradient(180deg, #06beb6 5.208%, #48b1bf 100%);
  --hp-gradient-primary-h: linear-gradient(90deg, #06beb6 5.208%, #48b1bf 100%);
  /* 掲載記事カードのアクセント（--hp-accent-external と同じ青で、primary と同じ明→暗の運び） */
  --hp-gradient-external: linear-gradient(180deg, #5aabe6 5.208%, #4285d6 100%);

  /* --- Typography --- */
  --hp-font-sans: "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro",
    "Noto Sans JP", "Helvetica Neue", Arial, sans-serif;
  --hp-font-latin: "Inter", "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif;

  --hp-weight-light: 300;
  --hp-weight-regular: 400;
  --hp-weight-bold: 600;
  /* 数字の強調（ヒーローの No.1 など）。Inter は index.html で 400 / 700 を読み込んでいる */
  --hp-weight-heavy: 700;

  --hp-text-3xs: 7px;
  --hp-text-2xs: 9px;
  --hp-text-tag: 9.5px;
  --hp-text-xs: 10px;
  --hp-text-label: 11px;
  --hp-text-sm: 12px;
  --hp-text-md: 13px;
  --hp-text-base: 14px;
  --hp-text-card: 15px;
  --hp-text-lg: 16px;
  --hp-text-xl: 18px;
  --hp-text-2xl: 20px;
  --hp-text-title: 22px;
  /* 大学別 LP のブランドメッセージ見出し（Figma 27349:10540） */
  --hp-text-title-lg: 24px;
  --hp-text-display: 28px;
  --hp-text-3xl: 32px;
  --hp-text-4xl: 36px;
  /* 「※ 〜」注記（NoteText）。SP は Figma どおり 9px、PC では読める大きさに上げる（下の @media） */
  --hp-text-note: var(--hp-text-2xs);

  --hp-leading-none: 1;
  --hp-leading-normal: 1.5;
  --hp-leading-heading: 1.62;
  /* PC サイドバー・SP ドロワーの行高（旧 elite.css の body { line-height: 1.6 } を継承していた頃と同じ値） */
  --hp-leading-ui: 1.6;
  --hp-leading-snug: 1.7;
  --hp-leading-relaxed: 1.8;
  --hp-leading-loose: 2;
  --hp-leading-prose-tight: 2.6;
  --hp-leading-prose: 3;

  --hp-tracking-tight: 0.02em;
  --hp-tracking-normal: 0.04em;
  --hp-tracking-medium: 0.06em;
  --hp-tracking-wide: 0.08em;
  --hp-tracking-label: 0.15em;

  /* --- Spacing --- */
  --hp-space-1: 4px;
  --hp-space-2: 8px;
  --hp-space-3: 12px;
  --hp-space-4: 16px;
  --hp-space-5: 20px;
  --hp-space-6: 24px;
  --hp-space-8: 32px;
  --hp-space-10: 40px;
  --hp-space-12: 48px;
  --hp-space-20: 80px;

  /* --- Form（事前登録フォーム。Figma FormItem の寸法） --- */
  --hp-space-field: 6px; /* ラベル ↔ 入力欄、ラベル ↔ 必須バッジ */
  --hp-space-field-y: 9px; /* 入力欄の上下パディング（16px 文字 + 枠線で高さ 44px） */
  --hp-space-field-x: 13px; /* 入力欄の左右パディング */
  --hp-select-caret: 24px; /* プルダウン右端のキャレット */

  /* --- Layout --- */
  --hp-content-width: 420px;
  --hp-gutter: var(--hp-space-5);
  --hp-section-pad-y: var(--hp-space-8);
  --hp-shell-bg: #e8f4f5;
  /* PC 背景ブロブの幅。Figma の 1440px 幅フレームに対する比率（641px / 413px） */
  --hp-shell-bg-left-w: 44.5vw;
  --hp-shell-bg-right-w: 28.7vw;
  /* ブランドメッセージ背景のもや（正方形）。セクション幅に対する倍率 */
  --hp-brand-glow-size: 125%;

  /* --- Radius --- */
  --hp-radius-sm: 4px;
  --hp-radius-tag: 6px;
  --hp-radius-field: 6px;
  --hp-radius-md: 8px;
  --hp-radius-lg: 16px;
  --hp-radius-xl: 22px;
  --hp-radius-pill: 999px;

  /* --- Shadows --- */
  --hp-shadow-float: 0 10px 7.5px rgba(119, 182, 201, 0.2);
  --hp-shadow-card-float: 0 10px 15px rgba(119, 182, 201, 0.2);
  --hp-shadow-icon: 0 2px 5px rgba(0, 121, 77, 0.15);
  --hp-shadow-card: 0 4px 16px rgba(31, 52, 56, 0.06);
  --hp-shadow-drawer: -8px 0 24px rgba(31, 52, 56, 0.12);
  --hp-drawer-backdrop: rgba(31, 52, 56, 0.4);

  /* --- Motion --- */
  --hp-duration-fast: 200ms;
  --hp-duration-base: 400ms;
  --hp-duration-slow: 700ms;
  --hp-ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --hp-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --hp-reveal-distance: 16px;

  /* --- Z-index --- */
  --hp-z-header: 20;
  --hp-z-drawer: 50;
}

/* スマホ（767px 以下）: 中央カラムを画面幅いっぱいにする。
   420px で固定すると iPhone Pro Max（430〜440px）などで左右に白い余白が出る。
   HomeHeader の固定メニューの右位置もこの値から計算しているので、ここだけ変えれば揃う */
@media (max-width: 767px) {
  .home-page,
  .home-shell,
  .home-drawer,
  .home-menu {
    --hp-content-width: 100vw;
  }
}

/* PC（サイドバー表示、1024px 以上）: 注記の文字を読める大きさに */
@media (min-width: 1024px) {
  .home-page,
  .home-shell,
  .home-drawer,
  .home-menu {
    --hp-text-note: 11px;
  }
}