/* =========================
 * Self-hosted fonts
 * ========================= */
@font-face {
  font-family: 'Noto Sans JP';
  src: url('fonts/NotoSansJP-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Noto Sans JP';
  src: url('fonts/NotoSansJP-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Noto Sans JP';
  src: url('fonts/NotoSansJP-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Noto Sans JP';
  src: url('fonts/NotoSansJP-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Schibsted Grotesk';
  src: url('fonts/SchibstedGrotesk-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Schibsted Grotesk';
  src: url('fonts/SchibstedGrotesk-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Schibsted Grotesk';
  src: url('fonts/SchibstedGrotesk-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Schibsted Grotesk';
  src: url('fonts/SchibstedGrotesk-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/*
 * PRONI アイミツ Web デザイントークン
 * Source: IM_スタイルガイド (Figma)
 * https://www.figma.com/design/YgLEMJULBYuzGgJTLNFZmf/IM_%E3%82%B9%E3%82%BF%E3%82%A4%E3%83%AB%E3%82%AC%E3%82%A4%E3%83%89
 *
 * 使用ルール:
 *   ① --color-primary（赤）は CV ボタンなど最重要要素のみに限定
 *   ② インラインリンクテキストには --color-info-deep (#1253D3) を使用
 */

:root {
  /* =========================
   * Brand
   * ========================= */
  --color-brand-red: #E10000;

  /* =========================
   * GrayScale — Text (Light)
   * ========================= */
  --color-text-primary: rgba(6, 16, 26, 0.92);
  --color-text-secondary: rgba(6, 16, 26, 0.62);
  --color-text-disabled: rgba(6, 16, 26, 0.38);

  /* =========================
   * GrayScale — Text (Dark)
   * ========================= */
  --color-text-primary-on-dark: rgba(255, 255, 255, 1);
  --color-text-secondary-on-dark: rgba(255, 255, 255, 0.74);
  --color-text-disabled-on-dark: rgba(255, 255, 255, 0.38);

  /* =========================
   * GrayScale — Surface
   * ========================= */
  --color-surface-light: #FFFFFF;
  --color-surface-dark: #121212;
  --color-surface-overlay-light: rgba(6, 16, 26, 0.08);
  --color-surface-overlay-dark: rgba(255, 255, 255, 0.12);
  --color-scrim: rgba(6, 16, 26, 0.32);

  /* =========================
   * GrayScale — Outline
   * ========================= */
  --color-outline-1: rgba(6, 16, 26, 0.38);
  --color-outline-2: rgba(6, 16, 26, 0.12);
  --color-outline-1-on-dark: rgba(255, 255, 255, 0.38);
  --color-outline-2-on-dark: rgba(255, 255, 255, 0.12);

  /* =========================
   * Primary (Red) — CV 導線限定
   * ========================= */
  --color-primary: #DE2D2D;
  --color-primary-medium: rgba(222, 45, 45, 0.60);
  --color-primary-low: rgba(222, 45, 45, 0.38);
  --color-primary-deep: #B90A0A;
  --color-primary-on-dark: #E76C6C;
  --color-primary-container: #FCE6E2;
  --color-primary-surface: #FEFBFB;

  --color-primary-50: #FEFBFB;
  --color-primary-100: #FCE6E2;
  --color-primary-200: #F9C9C9;
  --color-primary-300: #F4ACAC;
  --color-primary-400: #E76C6C;
  --color-primary-500: #DE2D2D;
  --color-primary-600: #B90A0A;
  --color-primary-700: #9D0D0D;
  --color-primary-800: #861111;
  --color-primary-900: #5C0C0C;

  /* =========================
   * Secondary (Brown)
   * ========================= */
  --color-secondary: #9F7356;
  --color-secondary-deep: #8A5B42;
  --color-secondary-container: #EBE6DC;
  --color-secondary-surface: #F7F5F3;

  --color-secondary-50: #F7F5F3;
  --color-secondary-100: #EBE6DC;
  --color-secondary-200: #CFC4B5;
  --color-secondary-300: #AF9C88;
  --color-secondary-400: #A68568;
  --color-secondary-500: #9F7356;
  --color-secondary-600: #8A5B42;
  --color-secondary-700: #794935;
  --color-secondary-800: #673A28;
  --color-secondary-900: #3A1C12;

  /* =========================
   * Info (Blue) — リンクテキスト用
   * ========================= */
  --color-info: #1B6EF3;
  --color-info-deep: #1253D3; /* インラインリンクはこれ */
  --color-info-container: #BDDEF9;
  --color-info-surface: #F1F8FD;

  --color-info-50: #F1F8FD;
  --color-info-100: #BDDEF9;
  --color-info-200: #92CDF7;
  --color-info-300: #5CB0F5;
  --color-info-400: #348DF4;
  --color-info-500: #1B6EF3;
  --color-info-600: #1253D3;
  --color-info-700: #1548B7;
  --color-info-800: #163F92;
  --color-info-900: #0A2560;

  /* =========================
   * Success (Green)
   * ========================= */
  --color-success: #16A247;
  --color-success-deep: #12813B;
  --color-success-container: #DFF6E7;
  --color-success-surface: #F8FFF8;

  --color-success-50: #F8FFF8;
  --color-success-100: #DFF6E7;
  --color-success-200: #C2F0D2;
  --color-success-300: #8FE5AD;
  --color-success-400: #57D182;
  --color-success-500: #29BC5D;
  --color-success-600: #16A247;
  --color-success-700: #12813B;
  --color-success-800: #126832;
  --color-success-900: #05451F;

  /* =========================
   * Error (Orange)
   * ========================= */
  --color-error: #D24D14;
  --color-error-deep: #BB3C11;
  --color-error-container: #FBEBDA;
  --color-error-surface: #FDFBF8;

  --color-error-50: #FDFAF8;
  --color-error-100: #FBEBDA;
  --color-error-200: #F7D2B0;
  --color-error-300: #F4B47B;
  --color-error-400: #EF873D;
  --color-error-500: #EE6C20;
  --color-error-600: #D24D14;
  --color-error-700: #BB3C11;
  --color-error-800: #993115;
  --color-error-900: #5C190A;

  /* =========================
   * Gray Tonal
   * ========================= */
  --color-gray-0: #FFFFFF;
  --color-gray-50: #F6F6F6;
  --color-gray-100: #E3E3E3;
  --color-gray-200: #C8C8C8;
  --color-gray-300: #A4A4A4;
  --color-gray-400: #818181;
  --color-gray-500: #666666;
  --color-gray-600: #515151;
  --color-gray-700: #424242;
  --color-gray-800: #313131;
  --color-gray-900: #1A1A1A;

  /* =========================
   * Typography — Font Family
   * ========================= */
  --font-family-ja: 'Noto Sans JP', sans-serif;
  --font-family-en: 'Schibsted Grotesk', sans-serif;
  --letter-spacing-base: 0.04em;

  /* =========================
   * Typography — PC Display
   * ========================= */
  --type-display-1-size: 64px;
  --type-display-1-lh: 1.4;
  --type-display-2-size: 48px;
  --type-display-2-lh: 1.4;
  --type-display-3-size: 40px;
  --type-display-3-lh: 1.4;

  /* =========================
   * Typography — PC Headings
   * ========================= */
  --type-heading-1-size: 34px;
  --type-heading-1-lh: 1.5;
  --type-heading-2-size: 28px;
  --type-heading-2-lh: 1.5;
  --type-heading-3-size: 24px;
  --type-heading-3-lh: 1.5;
  --type-heading-4-size: 20px;
  --type-heading-4-lh: 1.5;
  --type-title-1-size: 18px;
  --type-title-1-lh: 1.5;
  --type-title-2-size: 16px;
  --type-title-2-lh: 1.5;
  --type-title-3-size: 14px;
  --type-title-3-lh: 1.5;

  /* =========================
   * Typography — PC Body
   * ========================= */
  --type-body-xxl-size: 20px;
  --type-body-xxl-lh: 1.6;
  --type-body-xl-size: 18px;
  --type-body-xl-lh: 1.6;
  --type-body-l-size: 16px;
  --type-body-l-lh: 1.6;
  --type-body-m-size: 14px;
  --type-body-m-lh: 1.6;
  --type-body-s-size: 12px;
  --type-body-s-lh: 1.6;
  --type-body-xs-size: 10px;
  --type-body-xs-lh: 1.6;

  /* =========================
   * Typography — Article (行間広め)
   * ========================= */
  --type-article-xl-size: 18px;
  --type-article-xl-lh: 2.0;
  --type-article-l-size: 16px;
  --type-article-l-lh: 2.0;
  --type-article-m-size: 14px;
  --type-article-m-lh: 2.0;

  /* =========================
   * Typography — Button
   * ========================= */
  --type-button-xl-size: 20px;
  --type-button-xl-lh: 1.3;
  --type-button-l-size: 16px;
  --type-button-l-lh: 1.3;
  --type-button-m-size: 14px;
  --type-button-m-lh: 1.3;
  --type-button-s-size: 12px;
  --type-button-s-lh: 1.3;
}

/* =========================
 * SP (Mobile) Overrides
 * ========================= */
@media (max-width: 768px) {
  :root {
    --type-heading-1-size: 30px;
    --type-heading-2-size: 26px;
    --type-heading-3-size: 20px;
    --type-heading-4-size: 18px;
    --type-title-1-size: 16px;
    --type-title-2-size: 14px;
    --type-title-3-size: 12px;

    --type-body-xl-size: 18px;
    --type-body-l-size: 16px;
    --type-body-m-size: 14px;
    --type-body-s-size: 12px;
    --type-body-xs-size: 10px;

    --type-article-l-size: 16px;
    --type-article-m-size: 14px;
    --type-article-s-size: 12px;

    --type-button-xl-size: 18px;
    --type-button-l-size: 16px;
    --type-button-m-size: 14px;
    --type-button-s-size: 12px;
  }
}

/* =========================
 * Base Body Style
 * ========================= */
body {
  font-family: var(--font-family-ja);
  letter-spacing: var(--letter-spacing-base);
  font-size: var(--type-body-l-size);
  line-height: var(--type-body-l-lh);
  color: var(--color-text-primary);
  background-color: var(--color-surface-light);
}