/* CSS Custom Properties — HPP HP Design Tokens
 * Extracted from Figma file: hTk2UtIZPusbWScukKNgMV
 */

:root {
  /* =====================
   * Colors
   * ===================== */

  /* Primary brand colors */
  --color-navy-primary: #1a2332;       /* Navy/Primary — main background, text */
  --color-navy-secondary: #112b60;     /* Navy/Secondary — CTA card border, headings */
  --color-blue-primary: #1e4d8b;       /* blue/Primary — section titles, desc text */
  --color-blue-secondary: #2557a7;     /* blue/Secondary — CTA bg band */
  --color-white: #ffffff;              /* white */
  --color-white-pure: #f8fafc;         /* White/Pure — button text on dark */
  --color-white-ethereal: #e0e7ff;     /* White/Ethereal — footer nav link text */

  /* Gold gradient (contact button) */
  --gradient-gold-start: #f3e3b6;      /* Gradients/Gold start */
  --gradient-gold-end: #d6bb89;        /* Gradients/Gold end */
  --gradient-gold: linear-gradient(162.88deg, #f3e3b6 0.28%, #d6bb89 99.72%);

  /* Text colors */
  --color-text-muted: #cbd5e1;         /* txt/Dark-Base/Muted-Text */
  --color-text-dark: #1a2332;          /* navy used as dark text on light bg */

  /* Divider / border */
  --color-border: rgba(255, 255, 255, 0.2);

  /* =====================
   * Typography
   * ===================== */

  /* Font families */
  --font-jp-sans: 'Noto Sans JP', sans-serif;
  --font-jp-serif: 'Noto Serif JP', serif;
  --font-en-serif: 'Cormorant Garamond', serif;

  /* Font sizes */
  --font-size-xs: 12px;    /* txt/12pt */
  --font-size-sm: 14px;    /* ttl/14pt, txt/14pt */
  --font-size-base: 16px;  /* txt/16pt */
  --font-size-lg: 18px;
  --font-size-xl: 24px;
  --font-size-2xl: 32px;
  --font-size-3xl: 48px;
  --font-size-4xl: 64px;

  /* Font weights */
  --font-weight-regular: 400;
  --font-weight-bold: 700;

  /* Line heights */
  --line-height-base: 1.75;
  --line-height-tight: 1.5;
  --line-height-none: 1;

  /* Letter spacing */
  --letter-spacing-wide: 0.05em;   /* 5% / ~0.7px at 14px */
  --letter-spacing-base: 0.05em;   /* letterSpacing: 5 in Figma = 5% */
  --letter-spacing-none: 0;

  /* =====================
   * Spacing
   * ===================== */

  --spacing-xs: 8px;
  --spacing-sm: 16px;
  --spacing-md: 24px;
  --spacing-lg: 32px;
  --spacing-xl: 40px;
  --spacing-2xl: 64px;
  --spacing-3xl: 80px;
  --spacing-4xl: 120px;
  --spacing-5xl: 180px;

  /* =====================
   * Layout
   * ===================== */

  --layout-max-width: 1440px;
  --layout-content-width: 1024px;     /* PC コンテンツ最大幅（基本ルール） */
  --layout-content-wide: 1280px;      /* PIKAPIKA など、極端に広いビューポートでのみ採用する例外幅 */
  --layout-content-header: 1200px;    /* Header inner の例外幅（ビューポート >1300px のみ） */
  --layout-wide-breakpoint: 1300px;   /* この閾値以下は通常の 1024px 幅に揃える */
  --layout-padding-x: 180px;

  /* Header */
  --header-height: 56px;              /* Figma node 102:90: height=56px */
  --header-padding-x: 120px;          /* Figma node 102:90: x=120 from left edge */
  --header-top: 32px;                 /* Figma node 102:90: y=32 from top of FV */

  /* =====================
   * Border radius
   * ===================== */

  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-pill: 48px;

  /* =====================
   * Transitions
   * ===================== */

  --transition-base: 0.2s ease;
  --transition-slow: 0.4s ease;
}