/* ═══════════════════════════════════════════
   YOKOHAMA RUNNING CLUB — Design Tokens
   ═══════════════════════════════════════════ */

:root {
  /* ── Colors ── */
  --black: #000000;
  --white: #FFFFFF;
  --gray-50:  #FAFAFA;
  --gray-100: #F5F5F5;
  --gray-200: #E5E5E5;
  --gray-300: #D4D4D4;
  --gray-400: #B0B0B0; /* WCAG AA: 5.01:1 on #000 */
  --gray-500: #808080; /* WCAG AA: 5.32:1 on #000 */
  --gray-600: #757575; /* WCAG AA: 4.61:1 on #000 */
  --gray-700: #404040;
  --gray-800: #262626;
  --gray-900: #171717;
  --gray-950: #0A0A0A;
  --accent-blue: rgba(26, 58, 92, 0.12);

  /* ── Typography ── */
  --font-display: 'Space Grotesk', 'Inter', sans-serif;
  --font-en: 'Inter', 'Space Grotesk', sans-serif;
  --font-ja: 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', sans-serif;

  /* ── Font Sizes (fluid) ── */
  --text-xs:   clamp(10px, 0.7vw, 11px);
  --text-sm:   clamp(12px, 0.85vw, 13px);
  --text-base: clamp(14px, 1vw, 16px);
  --text-lg:   clamp(16px, 1.2vw, 18px);
  --text-xl:   clamp(18px, 1.5vw, 22px);
  --text-2xl:  clamp(22px, 2.5vw, 32px);
  --text-3xl:  clamp(28px, 3.5vw, 42px);
  --text-4xl:  clamp(36px, 5vw, 56px);
  --text-5xl:  clamp(42px, 7vw, 80px);
  --text-hero: clamp(48px, 11vw, 160px);

  /* ── Spacing ── */
  --space-xs:  clamp(4px, 0.5vw, 8px);
  --space-sm:  clamp(8px, 1vw, 16px);
  --space-md:  clamp(16px, 2vw, 24px);
  --space-lg:  clamp(24px, 3vw, 40px);
  --space-xl:  clamp(40px, 5vw, 64px);
  --space-2xl: clamp(60px, 8vw, 100px);
  --space-3xl: clamp(80px, 12vw, 160px);
  --space-page: clamp(20px, 5vw, 80px);

  /* ── Transitions ── */
  --ease-out: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-in-out: cubic-bezier(0.645, 0.045, 0.355, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --duration-fast: 0.2s;
  --duration-normal: 0.4s;
  --duration-slow: 0.8s;

  /* ── Layout ── */
  --max-width: 1400px;
  --header-height: 72px;

  /* ── Z-index layers ── */
  --z-base: 1;
  --z-header: 100;
  --z-menu: 150;
  --z-overlay: 200;
  --z-cursor: 9000;
  --z-noise: 9500;
  --z-loader: 10000;
}
