/* ==========================================================================
   hack.inc corporate site — Design Tokens
   ========================================================================== */

/*
  Noto Sans JP(自サイト配信のサブセット)。サイトで使っている文字だけを含む
  バリアブルフォント1ファイル(太さ400-900)。文章を追加・変更したら
  `python3 tools/build-fonts.py` で再生成すること(詳細はREADME参照)。
  Google Fontsからの読み込みは廃止した。
*/
@font-face {
  font-family: "Noto Sans JP";
  src: url("/assets/fonts/NotoSansJP-subset.woff2") format("woff2");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* --- Brand Colors --- */
  --color-navy: #1E2761;      /* メインアクセント（見出し・ライン等） */
  --color-copper: #B87333;    /* サブアクセント（ライン・テキスト装飾等） */
  --color-gold: #FFD700;      /* Contactバナー等の強調テキスト専用（2026-08-14よりCTAボタンには不使用） */
  /*
    CTAボタン(.btn-cta)の配色。ヘッダー・KVのContact・フォーム送信ボタン等、全て共通。
    2026-10-17、先方確認の結果、#B8860B(ダークゴールデンロッド)+白文字で確定した。
    別の色にする場合は --color-cta だけ書き換えればよい(文字色・hoverは自動で追従)。
    なお白文字とのコントラスト比は約3.3:1(WCAG AA基準4.5:1は未達)。比較した別候補は #C39143(約2.8:1)。
    旧: #D9A687(カッパー系、ネイビー文字)
  */
  --color-cta: #B8860B;
  --color-cta-text: #FFFFFF;             /* 通常時の文字色(矢印も同色) */
  --color-cta-hover-text: var(--color-navy); /* hover時(背景が白抜きになる)の文字色 */

  /* --- Base Colors --- */
  --color-white: #FFFFFF;
  --color-bg: #FFFFFF;        /* 白ベース */
  --color-text-primary: #1A1A1A;
  --color-text-secondary: #555555;
  --color-text-nav: #373737;
  --color-text-muted: #777777;
  --color-text-faint: #888888;
  --color-border: #E1E4E6;

  /* --- Section-specific accents (Figmaデザインより) --- */
  --color-bg-soft: #F8F8F7;      /* Contactセクション背景 */
  --color-bg-decor: #F0EDE8;     /* Hero装飾ブロブ */
  --color-bg-decor-navy: #EEF1FB;/* Release装飾ブロブ */
  --color-tag-copper-bg: #FBF5EE;
  --color-tag-teal-bg: #E8F6F7;
  --color-tag-teal-text: #2A8A94;
  --color-circle-gray: #F3F3F3;
  --color-checkbox-border: #767676;
  --color-logo: #231815;
  --color-error: #C0392B;     /* フォームエラー表示専用(枠線・エラーメッセージ) */

  /* --- Typography --- */
  /* 見出し・本文ともにNoto Sans JPで統一(先方確定事項) */
  --font-heading: "Noto Sans JP", sans-serif;
  --font-body: "Noto Sans JP", sans-serif;

  --fs-hero: clamp(2rem, 5vw, 3.5rem);
  --fs-h1: clamp(1.75rem, 4vw, 2.5rem);
  --fs-h2: clamp(1.5rem, 3vw, 2rem);
  --fs-h3: 1.25rem;
  --fs-body: 1rem;
  --fs-small: 0.875rem;

  --lh-heading: 1.5;
  --lh-body: 1.8;

  /* --- Spacing (8px base) --- */
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2rem;
  --space-5: 3rem;
  --space-6: 4rem;
  --space-7: 6rem;
  --space-8: 8rem;

  /* --- Layout --- */
  /* Figmaデザインは1440px canvasにガター180pxで実装されている(コンテンツ幅1080px = 180/1440 = 12.5vw) */
  --container-max: 1440px;
  --container-padding: clamp(1.25rem, 12.5vw, 11.25rem);
  --header-padding-inline: clamp(1.25rem, 4vw, 3rem);
  --header-height: 80px;
  --header-height-sp: 60px;
  --radius-pill: 999px;
  --radius-card: 16px;
  --radius-input: 6px;

  /* --- Motion --- */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast: 0.2s;
  --duration-base: 0.4s;
}

/* SPはコンテンツエリア外を20px固定(Figma SP仕様) */
@media (max-width: 640px) {
  :root {
    --container-padding: 20px;
    --header-padding-inline: 20px;
  }
}