/*
 * HPL 2026 デザイントークン
 *
 * 最終確認：
 * このデザインは「ウェルネス」ではなく
 * 「通過儀礼」を感じるか？
 *
 * 写真が主役。
 * 余白は舞台。
 * 色は装飾ではなく、導きとして使う。
 */

:root {
  /* カラー：基本色 */
  --color-white: #ffffff;
  --color-soft-white: #ffffff;
  --color-ivory: #ffffff;
  --color-charcoal: #111111;
  --color-ink: #181818;
  --color-muted: #7a7a7a;
  --color-line: #d9d9d9;

  /* カラー：HPLアクセント */
  --color-plum: #7c4a7e;
  --color-champagne: #c9b28a;

  /* カラー：補助色 */
  --color-fog: #e9e7e3;
  --color-stone: #8a8a8a;

  /* 意味を持つカラー */
  --color-background: var(--color-white);
  --color-surface: var(--color-white);
  --color-text-primary: var(--color-charcoal);

  /* Font Families */
  --font-display-en: "Inter Tight", sans-serif;
  --font-ja: "Noto Sans JP", sans-serif;

  /* Font Weights */
  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* Typography Scale */
  --text-xs: 12px;
  --text-sm: 14px;
  --text-base: 17px;
  --text-lg: 20px;
  --text-xl: 24px;
  --heading-sm: 28px;
  --heading-md: 36px;
  --heading-lg: 48px;
  --heading-xl: 64px;
  --display-sm: 72px;
  --display-md: 96px;
  --display-lg: 120px;

  /* Line Height */
  --leading-tight: 1.05;
  --leading-heading: 1.14;
  --leading-body: 1.72;
  --leading-relaxed: 1.85;

  /* Letter Spacing */
  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide: 0.05em;
  --tracking-wider: 0.1em;

  /* Spacing */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 32px;
  --space-xl: 64px;
  --space-2xl: 96px;
  --space-3xl: 144px;

  /* Container */
  --container-max: 1280px;
  --container-wide: 1440px;
  --page-gutter-mobile: 20px;
  --page-gutter-tablet: 40px;
  --page-gutter-desktop: 64px;
  --page-gutter: var(--page-gutter-mobile);

  /* Radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-full: 999px;

  /* Border / Line */
  --border-hairline: 1px solid var(--color-line);
  --border-strong: 1px solid var(--color-charcoal);

  /* Shadow */
  --shadow-soft: 0 16px 40px rgba(17, 17, 17, 0.08);
  --shadow-none: none;

  /* Motion */
  --motion-fast: 160ms ease-out;
  --motion-normal: 280ms ease-out;
  --motion-slow: 600ms ease-out;
}

@media (min-width: 768px) {
  :root {
    --page-gutter: var(--page-gutter-tablet);
  }
}

@media (min-width: 1200px) {
  :root {
    --page-gutter: var(--page-gutter-desktop);
  }
}