/* ============================================================
   Design Tokens — サーチナビ TOP
   Figma: サーチナビ TOPページデザイン案 (node 100:18168)
   ============================================================ */

:root {
  /* —— Color —— */
  --color-primary: #bd3a5d;
  --color-primary-soft: rgba(189, 58, 93, 0.7);
  --color-primary-muted: rgba(189, 58, 93, 0.6);
  --color-primary-ghost: rgba(189, 58, 93, 0.12);
  --color-primary-shadow: rgba(189, 58, 93, 0.25);

  --color-heading: #271f24;
  --color-heading-hero: #6f2252;
  --color-body: rgba(39, 31, 36, 0.65);
  --color-muted: #9a8790;
  --color-muted-light: #b8a4ab;
  --color-muted-lighter: #c4aeba;
  --color-placeholder: rgba(39, 31, 36, 0.35);
  --color-nav: #665b5f;

  --color-white: #ffffff;
  --color-bg: #ffffff;
  --color-bg-soft: #fdf8f9;
  --color-bg-pink: #faf5f7;
  --color-bg-footer: #f5ebf0;
  --color-bg-input: #fdfafa;
  --color-bg-hero-overlay: rgba(253, 240, 243, 0.78);

  --color-border: #f0e8ea;
  --color-border-input: #ede6e8;
  --color-border-soft: rgba(39, 31, 36, 0.15);

  /* Accent (features / categories) */
  --color-peach: #fda887;
  --color-peach-bg: rgba(253, 168, 135, 0.16);
  --color-peach-tag: rgba(253, 168, 135, 0.19);
  --color-yellow: #fee59b;
  --color-lavender: #cab7f2;
  --color-lavender-text: #7b5ea7;
  --color-lavender-bg: rgba(202, 183, 242, 0.16);
  --color-lavender-tag: rgba(202, 183, 242, 0.19);
  --color-mint: #ade5d0;
  --color-mint-text: #3e9e7f;
  --color-mint-bg: rgba(173, 229, 208, 0.16);
  --color-mint-tag: rgba(173, 229, 208, 0.19);
  /* Soft fills (categories / theme surfaces) */
  --color-coral: #d97a5a;
  --color-coral-text: #d97a5a;
  --color-coral-bg: #fef5f0;
  --color-pink-bg: #fdf0f3;
  --color-lavender-soft: #f5f0fb;
  --color-mint-soft: #f0faf6;
  --color-footer-text: #3d2b32;
  --color-cta-heading: #262638;

  /* —— Typography —— */
  --font-sans: "Zen Kaku Gothic New", "Hiragino Sans", "Hiragino Kaku Gothic ProN",
    "Noto Sans JP", sans-serif;
  --font-serif: "Zen Old Mincho", "Noto Serif JP", "Hiragino Mincho ProN", serif;
  --font-serif-alt: "Noto Serif JP", "Zen Old Mincho", serif;
  --font-accent: "Caveat", cursive;

  /* —— Layout ——
     html { font-size: 110% } により 1rem = 17.6px。
     詳細ページのコンテナ幅を実寸 1200px に合わせるための値。 */
  --container-detail: 68.18182rem; /* = 1200px（17.6px × 68.18182）*/

  /* —— Font sizes (rem) —— */
  --fs-xs: 0.625rem; /* 10px @16 */
  --fs-sm: 0.6875rem; /* 11px */
  --fs-13: 0.8125rem; /* 13px */
  --fs-14: 0.875rem; /* 14px */
  --fs-15: 0.9375rem; /* 15px */
  --fs-base: 1rem; /* 16px */
  --fs-17: 1.0625rem; /* 17px */
  --fs-18: 1.125rem; /* 18px */
  --fs-20: 1.25rem; /* 20px */
  --fs-26: 1.625rem; /* 26px */
  --fs-32: 2rem; /* 32px */
  --fs-34: 2.125rem; /* 34px */
  --fs-36: 2.25rem; /* 36px */
  --fs-52: 3.25rem; /* 52px */
  --fs-64: 4rem; /* 64px */

  /* —— Spacing —— */
  --space-4: 0.25rem;
  --space-6: 0.375rem;
  --space-8: 0.5rem;
  --space-10: 0.625rem;
  --space-12: 0.75rem;
  --space-16: 1rem;
  --space-20: 1.25rem;
  --space-24: 1.5rem;
  --space-28: 1.75rem;
  --space-32: 2rem;
  --space-40: 2.5rem;
  --space-48: 3rem;
  --space-56: 3.5rem;
  --space-64: 4rem;
  --space-80: 5rem;

  /* —— Layout —— */
  --layout-max: 90rem; /* 1440px */
  --layout-content: 80rem; /* 1280px */
  --layout-narrow: 60rem; /* 960px */
  --header-height: 6.25rem; /* 100px */
  --gutter: 5rem; /* 80px */
  --gutter-sm: 2.5rem; /* 40px */

  /* —— Radius —— */
  --radius-sm: 0.625rem; /* 10px */
  --radius-md: 0.875rem; /* 14px */
  --radius-lg: 1rem; /* 16px */
  --radius-xl: 1.5rem; /* 24px */
  --radius-pill: 9999px;

  /* —— Shadow —— */
  --shadow-card: 0 0.125rem 1rem rgba(189, 58, 93, 0.06),
    0 0.0625rem 0.25rem rgba(0, 0, 0, 0.03);
  --shadow-search: 0 0.5rem 2.5rem rgba(0, 0, 0, 0.18);
  --shadow-btn: 0 0.25rem 0.625rem rgba(189, 58, 93, 0.25);
  --shadow-form: 0 0.25rem 2.5rem rgba(189, 58, 93, 0.07),
    0 0.0625rem 0.5rem rgba(0, 0, 0, 0.04);
  --shadow-stats: 0 0.25rem 1.5rem rgba(189, 58, 93, 0.08);

  /* —— Transitions —— */
  --ease: 0.25s ease;
}