/* Hallmark · macrostructure: source=Figma (11-section single page) · theme: studied-DNA (source: Figma design file)
 * ELAN MARIRE Corporate Website — design tokens
 * Figma: "ELAN MARIRE｜Corporate Website Design" node 60:145（Desktop Homepage）と同期
 * DNA参照: ../../ELAN MARIRE/店長採用ページ制作/参考サイトDNA/09_eクリニック.md（フォント構成・トーンが同型）
 * 偶数px絶対ルールにより、Figma実測の奇数値（13px→14px, 15px→16px）は丸めている
 */
:root {
  /* ---- color（Figma変数をそのまま採用） ---- */
  --color-surface-base:           #ffffff;
  --color-surface-subtle:         #f7f4ee;
  --color-surface-accent:         #e4dac2;
  --gradient-hero-media: linear-gradient(51deg, #d0d0d0 4.46%, #f9f9f9 95.54%); /* Hero写真パネル背景（Figma node 70:1257 準拠） */
  --color-hero-mask-overlay: rgba(255,255,255,.4); /* Hero窓オーバーレイ（半透明白） */
  --color-hero-highlight: #f8f5ed; /* Hero見出しのマーカーハイライト */
  --color-surface-inverse:        #1a1a19;
  --color-surface-inverse-subtle: #272624;

  --color-text-primary:   #1a1a19;
  --color-text-secondary: #85827c;
  --color-text-accent:    #b9a06a;
  --color-text-inverse:   #ffffff;
  --color-text-inverse-muted: #a8a49b; /* 暗色面（surface-inverse）上の本文・キャプション用 */

  --color-action-accent:     #b9a06a;
  --color-action-on-accent:  #1a1a19;
  --color-action-primary:    #1a1a19;
  --color-action-on-primary: #ffffff;

  --color-border-default: #d8d2c7;
  --color-border-accent:  #b9a06a;
  --color-border-inverse: #e4dac2;

  --color-focus: #6f7ed6; /* フォーカスリング専用。ブランド色と衝突しない寒色を少量だけ使用 */

  /* ---- gradient（同色相内の明暗のみで構成。CTAボタン・アイコン面に使用） ---- */
  --gradient-accent: linear-gradient(135deg,
    color-mix(in oklab, var(--color-action-accent) 100%, white 22%) 0%,
    var(--color-action-accent) 55%,
    color-mix(in oklab, var(--color-action-accent) 100%, black 14%) 100%);
  --gradient-accent-hover: linear-gradient(135deg,
    var(--color-action-accent) 0%,
    color-mix(in oklab, var(--color-action-accent) 100%, black 20%) 100%);
  --gradient-primary: linear-gradient(180deg, #444444 0%, #272624 100%);
  --gradient-primary-hover: linear-gradient(180deg, #272624 0%, #1a1a19 100%);
  --color-border-primary: #b6b6b6;
  --gradient-outline: linear-gradient(135deg, var(--color-surface-base) 0%, var(--color-surface-subtle) 100%);
  --gradient-outline-hover: linear-gradient(135deg, var(--color-surface-subtle) 0%, color-mix(in oklab, var(--color-surface-subtle) 100%, black 4%) 100%);

  /* ---- type ---- */
  --font-display: "Cormorant Garamond", "Times New Roman", serif;      /* 欧文セリフ：ディスプレイ */
  --font-heading-jp: "Zen Old Mincho", "Hiragino Mincho ProN", serif;  /* 和文明朝：見出し */
  --font-body: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif; /* 和文ゴシック：本文・UI */
  --font-loop: "Noto Serif JP", "Hiragino Mincho ProN", serif; /* Heroループマーカー専用（極細ウェイト） */

  /* ---- type scale（フォントサイズ・行高は偶数に統一） ---- */
  --text-display-xl: clamp(44px, 4vw + 24px, 104px); /* Contact display "COME AS YOU ARE." */
  --text-display-lg: clamp(48px, 5vw + 16px, 88px);  /* Hero display "BEAUTY, REDESIGNED." */
  --text-display-md: clamp(40px, 3vw + 24px, 72px);  /* Section EN heading */
  --text-display-sm: 52px;  /* インデックス数字 (01/02/03) */
  --text-display-xs: 42px;  /* Footer wordmark */
  --text-heading-lg: 36px;  /* JP見出し大 */
  --text-heading-md: 24px;  /* JP見出し中 */
  --text-body: 16px;
  --text-label: 14px;       /* Figma実測13px→偶数丸め */
  --text-caption: 12px;

  --leading-display-xl: 1.04; /* 104px時108pxに相当。clampに追随する比率指定（行高は偶数ルール対象外） */
  --leading-display-lg: 1;
  --leading-display-md: 1.06;
  --leading-display-sm: 56px;
  --leading-display-xs: 48px;
  --leading-heading-lg: 58px;
  --leading-heading-md: 40px;
  --leading-body: 30px;
  --leading-label: 20px;
  --leading-caption: 20px;

  /* letter-spacing はFigmaのトラッキング値をそのまま採用（偶数ルールの対象外） */
  --tracking-display-lg: -1.5px;
  --tracking-display-md: -0.8px;
  --tracking-display-xs: 3.36px;
  --tracking-heading-lg: 1.8px;
  --tracking-heading-md: 1.2px;
  --tracking-label: 1px;
  --tracking-caption: 0.6px;
  --tracking-body: 0.5px;
  --tracking-wordmark: 2.4px;

  /* ---- spacing（4pt骨格・すべて偶数） ---- */
  --space-4: 4px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-32: 32px;
  --space-40: 40px;
  --space-48: 48px;
  --space-56: 56px;
  --space-64: 64px;
  --space-80: 80px;
  --space-96: 96px;
  --space-120: 120px;

  /* ---- layout ---- */
  --container-max: 1200px;
  --container-pad: 120px;

  /* ---- radius（アーチ型ポートレートマスク） ---- */
  --radius-card: 8px;   /* Flowカードの角丸（Figma設計準拠） */
  --radius-arch: 240px;
  --radius-arch-sm: 120px;

  /* ---- rule / border（1pxの罫線を禁止 → 2px + box-shadow inset） ---- */
  --rule-width: 2px;
  --rule-hairline: 2px;

  /* ---- motion ---- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in: cubic-bezier(0.7, 0, 0.84, 0);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-micro: 120ms;
  --dur-short: 220ms;
  --dur-long: 420ms;

  /* ---- hero loop marquee（eクリニック採用サイト .mv-loop を踏襲） ---- */
  --text-loop: clamp(56px, 8vw, 160px);
  --dur-loop: 90s;
}