/* =========================================
   CEN Site / Design Tokens
   - Figma の Foundations と完全に同期
========================================= */

:root {
  /* === Color === */
  --bg-primary: #ffffff;
  --bg-secondary: #f5f5f7;
  --bg-inverse: #1d1d1f;

  --text-primary: #1d1d1f;
  --text-secondary: #6e6e73;
  --text-tertiary: #86868b;
  --text-on-inverse: #ffffff;

  --border-primary: #e5e5e7;
  --border-strong: #d4d4d4;
  --border-subtle: #f5f5f7;

  --cta-bg: #1d1d1f;
  --cta-bg-hover: #000000;
  --cta-text: #ffffff;

  /* === Typography === */
  --font-sans: "Inter", "Helvetica Neue", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "Noto Sans JP", sans-serif;
  --font-jp: "Noto Sans JP", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", sans-serif;

  /* === Spacing === */
  --sp-xs: 4px;
  --sp-sm: 8px;
  --sp-md: 16px;
  --sp-lg: 24px;
  --sp-xl: 40px;
  --sp-2xl: 64px;
  --sp-3xl: 96px;
  --sp-4xl: 160px;

  /* === Radius === */
  --radius-card: 16px;
  --radius-panel: 20px;
  --radius-pill: 999px;
  --radius-demo: 12px;
  --radius-image: 16px;

  /* === Container === */
  --container-max: 1200px;
  --container-pad: 48px;

  /* === Shadow / Effect === */
  --shadow-card: 0 4px 24px rgba(0, 0, 0, 0.04);
}

/* === Mobile breakpoint adjustments === */
@media (max-width: 767px) {
  :root {
    --container-pad: 20px;
    --sp-4xl: 80px;
  }
}