/* =====================================================
   variables.css — Design Tokens (Mobile-first)
   Brand: Deep Blue × Gold / Inter + Noto Sans JP
   ===================================================== */

:root {
  /* ---------- Brand Colors ---------- */
  --c-brand-blue: #1f4063;        /* main (lowercase for consistency) */
  --c-brand-blue-light: #345d8c;
  --c-brand-blue-dark:  #12263f;

  --c-brand-gold: #a1905a;        /* accent */
  --c-brand-gold-light: #c2ad7b;
  --c-brand-gold-dark:  #7a683f;

  /* ---------- Neutrals / Base ---------- */
  --c-bg: #ffffff;
  --c-bg-muted: #f9fafb;
  --c-surface: #f3f4f6;

  --c-fg: #1a1a1a;
  --c-fg-muted: #6b7280; /* ← 設計準拠 */
  --c-fg-inverse: #ffffff;

  --c-border: #e5e7eb;

  /* ---------- Feedback ---------- */
  --c-success: #16a34a;
  --c-warning: #f59e0b;
  --c-danger:  #ef4444;

  /* ---------- Backward compatibility (旧変数の互換) ---------- */
  --color-primary:   var(--c-brand-blue);
  --color-secondary: var(--c-brand-gold);
  --color-text:      var(--c-fg);
  --color-text-light: var(--c-fg-inverse);
  --color-bg:        var(--c-bg);
  --subcat-bg:       var(--c-bg-muted);

  /* ---------- Typography ---------- */
  /* 日本語（本文・UI） */
  --font-sans-jp: "Noto Sans JP", system-ui, -apple-system, "Segoe UI", sans-serif;
  /* 英字・数字（.en / .price で明示的に使用） */
  --font-latin:   "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* features（本文に適用用のトークン化） */
  --jp-font-feature: "palt";
  --latin-kerning: normal;

  /* Weights */
  --fw-thin: 300;
  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semibold: 600;
  --fw-bold:    700;

/* Font sizes（ベース設計は root16px） */
--fs-3xs: 0.625rem;   /* 10px */
--fs-2xs: 0.6875rem;  /* 11px */
--fs-xs: 0.75rem;     /* 12px */
--fs-sm: 0.8125rem;   /* 13px */
--fs-14: 0.875rem;    /* 14px */
--fs-15: 0.9375rem;   /* 15px */
--fs-base: 1rem;      /* 16px */
--fs-md: 1.125rem;    /* 18px */
--fs-lg: 1.375rem;    /* 22px */
--fs-xl: 1.75rem;     /* 28px */
--fs-2xl: 2rem;       /* 32px */



  /* Line-height */
  --lh-tight: 1.3;
  --lh-base:  1.7;
  --lh-loose: 1.8;

  /* ---------- Spacing (4px grid) ---------- */
  --space-1: 0.25rem;  /* 4px  */
  --space-2: 0.5rem;   /* 8px  */
  --space-3: 0.75rem;  /* 12px */
  --space-4: 1rem;     /* 16px */
  --space-6: 1.5rem;   /* 24px */
  --space-8: 2rem;     /* 32px */
  --space-10: 2.5rem;  /* 40px */
  --space-12: 3rem;    /* 48px */
  --space-16: 4rem;    /* 64px */
  /* --- Bigger Spacing (>= 64px) --- */
  --space-20: 5rem;    /* 80px  */
  --space-24: 6rem;    /* 96px  */
  --space-28: 7rem;    /* 112px */
  --space-32: 8rem;    /* 128px */
  --space-36: 9rem;    /* 144px */
  --space-40: 10rem;   /* 160px */
  --space-48: 12rem;   /* 192px */

  /* ---------- Radius ---------- */
  --radius-sm: 4px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 24px;
  --radius-full: 9999px;

  /* ---------- Shadows ---------- */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.06);
  --shadow-md: 0 8px 24px rgba(0,0,0,0.08);
  --shadow-lg: 0 16px 40px rgba(0,0,0,0.12);
  --shadow-xl: 0 24px 64px rgba(0,0,0,0.16);

  /* ---------- Layout ---------- */
  --container-max: 1200px;
  --container-gutter: 1rem; /* 16px。container幅計算に使用 */

  /* ---------- Mobile UI ---------- */
  --mnav-h: 56px; /* 下部固定ナビ高さ */

  /* ---------- Z-index scale（設計準拠） ---------- */
  --z-sticky:   1000;
  --z-dropdown: 1100;
  --z-fixed:    1200;
  --z-modal:    1300;
  --z-overlay:  1400;

  /* ---------- Motion ---------- */
  --ease: cubic-bezier(.2,.8,.2,1);
  --dur-fast: 120ms;
  --dur: 200ms;
  --dur-slow: 320ms;
}

/* （任意）PCでサイズを少しだけ上げたい場合 */
@media (min-width: 768px) {
  :root {
    --fs-base: 1rem;     /* 16px（据え置き）*/
    --fs-md:   1.125rem; /* 18px */
    --fs-lg:   1.375rem; /* 22px */
    --fs-xl:   1.75rem;  /* 28px */
    --fs-2xl:  2rem;     /* 32px */
  }
}

:root{
  --dur: 300ms;
  --ease: cubic-bezier(.25,.8,.25,1);
  --container-max: 1200px;
  --container-gutter: 1rem;
}