/* =====================================================
   PetAirJPN Design Tokens
   全ページ共通のデザイン変数を定義
   ===================================================== */

:root {
  /* -----------------------------
     COLOR PALETTE
     ----------------------------- */
  /* プライマリ（ロゴ／空のロイヤルブルー｜公式ブランドガイド準拠） */
  --color-primary: #1D6FC4;       /* Royal ink blue（ロゴ色・空を連想） */
  --color-primary-light: #6FB4EE; /* スカイブルー */
  --color-primary-dark: #1F66B5;  /* 濃いロイヤル（hover等） */
  --color-primary-deep: #1A4F8F;  /* 深いロイヤルブルー（見出し） */

  /* セカンダリ（自然・安心・大地） */
  --color-secondary: #4C8FB5;
  --color-secondary-light: #7BB3D0;
  --color-secondary-dark: #356784;

  /* アクセント（CTA・注意・温かみ） */
  --color-accent: #F2A93C;        /* 装飾・アイコン・罫線用（非テキスト） */
  --color-accent-light: #FBC06A;
  --color-accent-dark: #D2872A;
  --color-accent-deep: #8F5C14;   /* 真鍮。明色背景上のテキスト/CTA用（紙・砂地でもAA） */

  /* JPNレッド（公式ガイド：1点アクセント専用。多用禁止） */
  --color-jpn-red: #DC1A1A;

  /* ニュートラル */
  --color-bg: #F6FAFE;       /* 温かい紙色（Travel Papers。旅券・手帖の地） */
  --color-bg-alt: #EAF3FB;   /* 深めの紙（セクション差し） */
  --color-cream: #E3EFF9;   /* 砂色（クリームセクション） */
  --color-bg-dark: #103A66;  /* 墨紺（ダークセクション。インクの青） */

  /* テキスト */
  --color-text: #17293C;
  --color-text-sub: #4A5A6A;
  --color-text-mute: #5E7489;
  --color-text-inverse: #FAFAF7;

  /* ボーダー */
  --color-border: #D5E3F0;
  --color-border-dark: #B9CDDE;

  /* ステータス */
  --color-success: #3D6B5C;
  --color-warning: #D4893E;
  --color-error: #B84A3E;

  /* -----------------------------
     TYPOGRAPHY
     ----------------------------- */
  --font-jp: 'Zen Kaku Gothic New', 'Hiragino Sans', 'Yu Gothic Medium', 'Yu Gothic', sans-serif;
  --font-en: 'Nunito Sans', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
  --font-serif: 'Shippori Mincho B1', 'Hiragino Mincho ProN', 'Yu Mincho', serif;
  --font-mono: 'SF Mono', Monaco, Menlo, monospace;

  /* フォントサイズ */
  --fs-xs: 0.75rem;     /* 12px */
  --fs-sm: 0.875rem;    /* 14px */
  --fs-base: 1rem;      /* 16px */
  --fs-md: 1.125rem;    /* 18px */
  --fs-lg: 1.25rem;     /* 20px */
  --fs-xl: 1.5rem;      /* 24px */
  --fs-2xl: 2rem;       /* 32px */
  --fs-3xl: 2.5rem;     /* 40px */
  --fs-4xl: 3.25rem;    /* 52px */
  --fs-5xl: 4rem;       /* 64px */

  /* 行間 */
  --lh-tight: 1.2;
  --lh-snug: 1.4;
  --lh-base: 1.7;
  --lh-loose: 2;

  /* 字間 */
  --ls-tight: -0.02em;
  --ls-base: 0.01em;
  --ls-wide: 0.05em;

  /* フォントウエイト */
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* -----------------------------
     SPACING (8pxグリッド)
     ----------------------------- */
  --sp-1: 0.25rem;   /* 4px */
  --sp-2: 0.5rem;    /* 8px */
  --sp-3: 0.75rem;   /* 12px */
  --sp-4: 1rem;      /* 16px */
  --sp-5: 1.5rem;    /* 24px */
  --sp-6: 2rem;      /* 32px */
  --sp-7: 3rem;      /* 48px */
  --sp-8: 4rem;      /* 64px */
  --sp-9: 6rem;      /* 96px */
  --sp-10: 8rem;     /* 128px */

  /* セクション余白 */
  --section-py: var(--sp-9);
  --section-py-mobile: var(--sp-8);

  /* -----------------------------
     LAYOUT
     ----------------------------- */
  --max-width: 1200px;
  --max-width-narrow: 880px;
  --max-width-wide: 1400px;
  --container-px: var(--sp-5);
  --container-px-mobile: var(--sp-4);

  /* -----------------------------
     RADIUS
     ----------------------------- */
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 9999px;

  /* -----------------------------
     SHADOW
     ----------------------------- */
  /* 影は深いネイビーで極薄・多層に。プレミアムは「滲む青影」ではなく「気配だけの影＋余白」 */
  --shadow-xs: 0 1px 2px rgba(30, 26, 60, 0.04);
  --shadow-sm: 0 1px 2px rgba(30, 26, 60, 0.04), 0 2px 6px rgba(30, 26, 60, 0.04);
  --shadow-md: 0 2px 4px rgba(30, 26, 60, 0.04), 0 6px 16px rgba(30, 26, 60, 0.06);
  --shadow-lg: 0 4px 10px rgba(30, 26, 60, 0.05), 0 14px 36px rgba(30, 26, 60, 0.08);
  --shadow-xl: 0 8px 18px rgba(30, 26, 60, 0.06), 0 28px 60px rgba(30, 26, 60, 0.10);

  /* -----------------------------
     TRANSITION
     ----------------------------- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --duration-fast: 150ms;
  --duration-base: 300ms;
  --duration-slow: 600ms;

  /* -----------------------------
     Z-INDEX
     ----------------------------- */
  --z-base: 1;
  --z-dropdown: 10;
  --z-sticky: 20;
  --z-fixed: 30;
  --z-modal: 40;
  --z-toast: 50;
}

/* レスポンシブブレークポイント（参考） */
/* Mobile:    ~ 640px  */
/* Tablet:    641 ~ 1024px */
/* Desktop:   1025px ~ */

@media (max-width: 768px) {
  :root {
    --fs-4xl: 2.25rem;   /* モバイルでは見出しを小さく */
    --fs-5xl: 2.75rem;
    --section-py: var(--section-py-mobile);
    --container-px: var(--container-px-mobile);
  }
}