/* ==========================================================================
   Design Tokens
   ========================================================================== */
:root {

  /* PRIMARY — オレンジ */
  --orange-50: #FFF9E2;
  --orange-100: #FFF3C4;
  --orange-150: #FFE2CA;
  --orange-200: #FFE58A;
  --orange-300: #FFD24D;
  --orange-350: #F4A962;
  --orange-400: #FFB81C;
  --orange-500: #F2760D;
  --orange-550: #FF6600;
  --orange-600: #D14D00;

  /* SECONDARY — レッド */
  --red-100: #FFACB8;
  --red-500: #D6001F;
  --red-700: #830013;

  /* NEUTRAL */
  --neutral-100: #FAF6F3;
  --neutral-200: #F0E9E3;
  --neutral-300: #DDD2C8;
  --neutral-400: #C0B3A6;
  --neutral-500: #9C8E82;
  --neutral-600: #7A6E64;
  --neutral-700: #5C534B;
  --neutral-800: #3D3630;
  --neutral-900: #14131C;

  /* ---- セマンティック ---- */
  --color-text: #000000;
  --color-text-muted: #000000;
  --color-text-on-dark: #ffffff;
  --color-text-on-dark-muted: #ffffff;

  --color-bg: #ffffff;
  --color-fg: #ffffff;
  --color-surface: var(--neutral-100);
  --color-surface-alt: var(--neutral-200);

  --color-border: var(--neutral-300);
  --color-border-strong: #000000;

  --color-accent: var(--orange-500);
  --color-accent-hover: var(--orange-600);
  --color-accent-text: var(--orange-600);
  --color-accent-vivid: var(--orange-550);
  --color-accent-on-dark: var(--orange-400);
  --color-accent-soft: rgba(242, 118, 13, .1);
  --color-accent-wash: rgba(242, 118, 13, .06);

  --color-emphasis: var(--red-500);

  --color-danger: var(--red-500);
  --color-danger-soft: #FFF0F1;

  --color-neutral-darkest: #000000;
  --color-neutral-lightest: var(--neutral-100);
  --color-white: #ffffff;

  /* Radius */
  --radius-medium: 0px;

  /* Stroke */
  --border-width: 1px;
  --divider-width: 1px;

  /* Interaction */
  --opacity-hover: .7;
  --transition-hover: opacity .2s ease;

  /* Layout */
  --container-large: 1280px;
  --max-width-large: 768px;
  --page-padding: 64px;
  --section-padding-large: 112px;
  --section-padding-medium: 80px;

  --card-padding: 32px;
  --card-padding-loose: 40px 32px;
  --vmv-card-padding: 40px 32px;

  /* Typography */
  --font-body: "Inter", "Noto Sans JP", -apple-system, "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  --font-heading: "Poppins", "BIZ UDPGothic", -apple-system, "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;

  --fs-heading-1: clamp(2rem, 1.375rem + 2.7vw, 3.5rem);
  --fs-heading-2: clamp(1.75rem, 1.25rem + 2.2vw, 3rem);
  --fs-heading-3: clamp(1.625rem, 1.25rem + 1.6vw, 2.5rem);
  --fs-heading-4: clamp(1.5rem, 1.3125rem + 0.9vw, 2rem);
  --fs-heading-5: 1.5rem;
  --fs-heading-6: 1.25rem;
  --fs-text-medium: 1.125rem;
  --fs-text-regular: 1rem;
  --fs-text-list: clamp(0.875rem, 0.8rem + 0.3vw, 1rem);
  --fs-text-small: 0.875rem;
  --fs-tagline: 1rem;

  --fw-regular: 400;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-heading: 500;

  --lh-heading: 1.2;
  --lh-body: 2;
}

@media (max-width: 991px) {
  :root {
    --page-padding: 32px;
    --section-padding-large: 64px;
    --section-padding-medium: 48px;
    --vmv-card-padding: 24px 18px;
  }
}

@media (max-width: 640px) {
  :root {
    --page-padding: 20px;
    --section-padding-large: 48px;
    --section-padding-medium: 40px;
    --fs-text-medium: 1rem;
    --card-padding: 24px;
    --card-padding-loose: 28px 24px;
    --vmv-card-padding: 24px 20px;
  }
}