/* ==========================================================================
   variables.css — デザイントークン定義ファイル
   --------------------------------------------------------------------------
   このファイルだけを別のデザインシステムに差し替えれば、
   HTML/コンポーネントCSS(style.css)を書き換えずにサイト全体の見た目を
   変更できるように設計されています。
   現在の値は「Apple風フォトグラフィー・ファースト」デザインシステム
   (DESIGNapple.md)に基づきます。写真を主役にし、UIは静かに引く構成。
   ========================================================================== */

:root {
  /* ---- Brand / Accent ---- */
  --color-primary: #0066cc;          /* Action Blue — 唯一のインタラクティブカラー */
  --color-primary-focus: #0071e3;    /* フォーカスリング用 */
  --color-primary-on-dark: #2997ff;  /* ダーク面でのリンク色 */
  --color-secondary: #0066cc;        /* 旧テンプレート互換（第二アクセントは持たない） */

  /* ---- Surface Palette ---- */
  --color-bg: #ffffff;
  --color-surface: #f5f5f7;          /* パーチメント（オフホワイト） */
  --color-surface-pearl: #fafafc;
  --color-surface-raised: #ffffff;
  --color-tile-dark-1: #272729;
  --color-tile-dark-2: #2a2a2c;
  --color-tile-dark-3: #252527;
  --color-surface-black: #000000;
  --color-chip-translucent: rgba(210, 210, 215, 0.64);

  /* ---- Content Palette ---- */
  --color-text-primary: #1d1d1f;
  --color-text-secondary: #6e6e73;
  --color-text-tertiary: #86868b;
  --color-text-inverse: #ffffff;
  --color-text-inverse-muted: #cccccc;
  --color-text-on-pearl: #333333;
  --color-text-muted-48: #7a7a7a;

  /* ---- Border Palette ---- */
  --color-border-subtle: #f0f0f0;
  --color-border-medium: #e0e0e0;
  --color-border-strong: rgba(0, 0, 0, 0.12);

  /* ---- Semantic Colors ---- */
  --color-success: #1d7a3e;
  --color-success-bg: #f0faf3;
  --color-warning: #a15c00;
  --color-warning-bg: #fdf6e8;
  --color-error: #d0453c;
  --color-error-bg: #fdf1f0;
  --color-info: var(--color-primary);

  /* ---- Font Families ----
     SF Pro はApple独自書体のため、system-ui/-apple-systemでApple端末では
     実際のSF Proに解決させ、それ以外ではInter（オープンソースの近似書体）
     にフォールバックします。 */
  --font-display: "Inter", -apple-system, BlinkMacSystemFont, "SF Pro Display", system-ui, "Hiragino Sans", "Noto Sans JP", sans-serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, "Hiragino Sans", "Noto Sans JP", sans-serif;
  --font-mono: "SF Mono", "Space Mono", "Courier New", Consolas, monospace;

  /* ---- Type Scale (Apple hierarchy) ---- */
  --text-hero-size: 56px;
  --text-hero-weight: 600;
  --text-hero-line: 1.07;
  --text-hero-tracking: -0.02em;

  --text-display-size: 40px;
  --text-display-weight: 600;
  --text-display-line: 1.1;
  --text-display-tracking: -0.01em;

  --text-headline-size: 34px;
  --text-headline-weight: 600;
  --text-headline-line: 1.25;
  --text-headline-tracking: -0.015em;

  --text-subhead-size: 28px;
  --text-subhead-weight: 400;
  --text-subhead-line: 1.2;
  --text-subhead-tracking: 0;

  --text-lead-airy-size: 24px;
  --text-lead-airy-weight: 300;
  --text-lead-airy-line: 1.5;

  --text-tagline-size: 21px;
  --text-tagline-weight: 600;
  --text-tagline-line: 1.2;
  --text-tagline-tracking: 0.005em;

  --text-body-lg-size: 21px;
  --text-body-lg-weight: 400;
  --text-body-lg-line: 1.5;

  --text-body-size: 17px;
  --text-body-weight: 400;
  --text-body-line: 1.5;
  --text-body-strong-weight: 600;

  --text-dense-link-size: 17px;
  --text-dense-link-line: 2.2;

  --text-body-sm-size: 15px;
  --text-body-sm-weight: 400;
  --text-body-sm-line: 1.5;

  --text-caption-size: 14px;
  --text-caption-weight: 400;
  --text-caption-line: 1.4;

  --text-overline-size: 13px;
  --text-overline-weight: 600;
  --text-overline-line: 1.3;
  --text-overline-tracking: 0.04em;

  --text-button-lg-size: 18px;
  --text-button-lg-weight: 400;

  --text-button-utility-size: 14px;
  --text-button-utility-weight: 400;
  --text-button-utility-tracking: -0.01em;

  --text-fine-print-size: 12px;
  --text-fine-print-line: 1.5;

  --text-nav-link-size: 13px;
  --text-nav-link-weight: 400;

  --text-code-size: 14px;
  --text-code-weight: 400;
  --text-code-line: 1.6;

  /* ---- Spacing (8px base unit, Apple rhythm) ---- */
  --space-unit: 8px;
  --space-4: 4px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-17: 17px;
  --space-24: 24px;
  --space-32: 32px;
  --space-48: 48px;
  --space-64: 64px;
  --space-80: 80px;
  --space-96: 96px;

  --space-component-sm: 8px;
  --space-component-md: 16px;
  --space-component-lg: 24px;

  --space-section-mobile: 48px;
  --space-section-tablet: 64px;
  --space-section-desktop: 80px;

  /* ---- Radius (do not mix grammars — see DESIGNapple.md) ---- */
  --radius-none: 0px;
  --radius-xs: 5px;
  --radius-sm: 8px;
  --radius-md: 11px;
  --radius-lg: 18px;
  --radius-pill: 9999px;
  --radius-full: 9999px;

  /* ---- Shadows — exactly one shadow exists in this system: the product
         shadow reserved for photography resting on a surface. Everything
         else (cards, buttons, nav) stays flat. ---- */
  --shadow-product: 3px 5px 30px rgba(0, 0, 0, 0.22);
  --shadow-subtle: none;
  --shadow-medium: none;
  --shadow-large: none;
  --shadow-overlay: none;
  --shadow-focus-ring: 0 0 0 2px #fff, 0 0 0 4px var(--color-primary-focus);

  /* ---- Special accents ---- */
  --accent-underline-width: 2px;
  --accent-underline-color: var(--color-primary);
  --pull-quote-border: 3px solid var(--color-primary);

  /* ---- Borders ---- */
  --border-thin: 1px solid var(--color-border-subtle);
  --border-default: 1px solid var(--color-border-medium);
  --border-strong: 1px solid rgba(0, 0, 0, 0.16);

  /* ---- Layout / Breakpoints (参照用。実際のブレイクポイントは
         style.css内の @media で下記と同じ数値を直書きしています。
         CSSカスタムプロパティはメディアクエリ条件には使用できないため) ---- */
  --bp-mobile: 375px;
  --bp-tablet: 768px;
  --bp-desktop: 1280px;
  --container-max: 1200px;

  /* ---- Transitions ---- */
  --transition-fast: 120ms ease;
  --transition-base: 240ms cubic-bezier(0.28, 0.11, 0.32, 1);
  --tooltip-delay-enter: 250ms;
  --tooltip-delay-leave: 0ms;

  /* ---- Micro-interaction (system-wide) ---- */
  --press-scale: scale(0.95);
}