/* =========================================================
   Design Tokens — デザインの差し替えはこのファイル（または themes/*.css）だけで行う
   既定値: DESIGN-apple.md（Photography-first / Action Blue / SF Pro）
   コンポーネント側（base.css）は必ずここで定義した変数のみを参照する
   ========================================================= */
:root {
  /* ---------- Color: Brand & Accent ---------- */
  --color-primary: #0066cc;          /* 唯一のインタラクティブカラー */
  --color-primary-focus: #0071e3;    /* フォーカスリング */
  --color-primary-on-dark: #2997ff;  /* ダークタイル上のリンク */
  --color-on-primary: #ffffff;

  /* ---------- Color: Surface ---------- */
  --color-canvas: #ffffff;
  --color-parchment: #f5f5f7;
  --color-pearl: #fafafc;
  --color-tile-1: #272729;
  --color-tile-2: #2a2a2c;
  --color-tile-3: #252527;
  --color-black: #000000;
  --color-chip: rgba(210, 210, 215, 0.64);

  /* ---------- Color: Text ---------- */
  --color-ink: #1d1d1f;
  --color-on-dark: #ffffff;
  --color-body-muted: #cccccc;       /* ダーク面の補足テキスト */
  --color-ink-80: #333333;
  --color-ink-48: #7a7a7a;

  /* ---------- Color: Lines ---------- */
  --color-divider: #f0f0f0;
  --color-hairline: #e0e0e0;
  --color-hairline-alpha: rgba(0, 0, 0, 0.08);

  /* ---------- Color: Semantic (テーマで差し替える用途別エイリアス) ---------- */
  --color-badge-bg: var(--color-parchment);
  --color-badge-fg: var(--color-ink);
  --color-required: var(--color-primary);
  --color-success: var(--color-primary);
  --color-error: #d70015;

  /* ---------- Navigation ---------- */
  --nav-bg: var(--color-black);
  --nav-fg: var(--color-on-dark);
  --nav-fg-muted: rgba(255, 255, 255, 0.8);
  --nav-height: 44px;
  --logo-color: var(--color-on-dark);
  --subnav-bg: rgba(245, 245, 247, 0.8);
  --subnav-fg: var(--color-ink);
  --subnav-height: 52px;
  --backdrop: saturate(180%) blur(20px);
  --drawer-bg: var(--color-black);
  --drawer-fg: var(--color-on-dark);

  /* ---------- Footer ---------- */
  --footer-bg: var(--color-parchment);
  --footer-fg: var(--color-ink-80);
  --footer-fg-muted: var(--color-ink-48);
  --footer-photo-height: 220px;
  --footer-photo-filter: none;

  /* ---------- Typography: Family ---------- */
  --font-display: "SF Pro Display", system-ui, -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Noto Sans JP", "Yu Gothic", sans-serif;
  --font-text: "SF Pro Text", system-ui, -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Noto Sans JP", "Yu Gothic", sans-serif;
  --font-label: var(--font-text);     /* 英字ラベル（LINEUP など） */

  /* ---------- Typography: Scale ---------- */
  --fs-hero: 56px;      --lh-hero: 1.07;     --ls-hero: -0.28px;
  --fs-display-lg: 40px;--lh-display-lg: 1.1;--ls-display-lg: 0;
  --fs-display-md: 34px;--lh-display-md: 1.3; --ls-display-md: -0.374px;
  --fs-lead: 28px;      --lh-lead: 1.3;      --ls-lead: 0.196px;
  --fs-lead-airy: 24px; --lh-lead-airy: 1.5;
  --fs-tagline: 21px;   --lh-tagline: 1.3;   --ls-tagline: 0.231px;
  --fs-body: 17px;      --lh-body: 1.75;     --ls-body: -0.374px;
  --fs-caption: 14px;   --lh-caption: 1.6;   --ls-caption: -0.224px;
  --fs-button-lg: 18px;
  --fs-fine: 12px;      --lh-fine: 1.5;      --ls-fine: -0.12px;
  --fs-micro: 10px;
  --fs-nav: 12px;
  --fs-dense-link: 14px;--lh-dense-link: 2.2;

  --fw-light: 300;
  --fw-regular: 400;
  --fw-display: 600;
  --fw-strong: 600;

  --label-transform: uppercase;
  --label-tracking: 0.08em;
  --label-color: var(--color-ink-48);
  --label-color-on-dark: var(--color-body-muted);

  /* ---------- Radius ---------- */
  --radius-none: 0px;
  --radius-xs: 5px;
  --radius-sm: 8px;
  --radius-md: 11px;
  --radius-lg: 18px;
  --radius-pill: 9999px;
  --radius-button: var(--radius-pill);
  --radius-card: var(--radius-lg);
  --radius-media: var(--radius-sm);   /* カード内の画像 */
  --radius-tile: var(--radius-none);  /* 全幅タイルは角丸なし */
  --radius-input: var(--radius-sm);

  /* ---------- Spacing ---------- */
  --space-xxs: 4px;
  --space-xs: 8px;
  --space-sm: 12px;
  --space-md: 17px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-xxl: 48px;
  --space-section: 80px;
  --gutter: 22px;                     /* 画面端の余白 */
  --grid-gap: 20px;

  /* ---------- Layout ---------- */
  --container: 980px;
  --container-wide: 1200px;
  --container-narrow: 692px;

  /* ---------- Elevation ---------- */
  --shadow-product: rgba(0, 0, 0, 0.22) 3px 5px 30px 0;  /* 写真のみに使用 */
  --shadow-card: none;
  --border-card: 1px solid var(--color-hairline);

  /* ---------- Motion ---------- */
  --press-scale: 0.95;
  --ease: cubic-bezier(0.28, 0.11, 0.32, 1);
  --duration: 0.6s;
  --fade-distance: 24px;
  --slide-interval: 5000;             /* JSから参照（ms） */
}

/* ---------- Responsive scale ---------- */
@media (max-width: 1068px) {
  :root { --fs-hero: 48px; }
}
@media (max-width: 734px) {
  :root {
    --fs-hero: 34px;
    --fs-display-lg: 30px;
    --fs-display-md: 26px;
    --fs-lead: 21px;
    --fs-lead-airy: 19px;
    --fs-tagline: 19px;
    --fs-body: 16px;
    --space-section: 56px;
    --gutter: 16px;
  }
}
@media (max-width: 419px) {
  :root { --fs-hero: 28px; --fs-display-lg: 26px; --space-section: 48px; }
}