/* variables.css — design tokens */
:root {
  /* color: brand */
  --color-navy-900: #0a1b34;        /* メイン最濃 */
  --color-navy-800: #0e2647;        /* メインカラー */
  --color-navy-700: #14325c;
  --color-navy-600: #1d4377;
  --color-navy-500: #2a5797;
  --color-navy-100: #e6ecf5;
  --color-navy-50:  #f2f5fa;

  /* color: accent (warm) */
  --color-accent:        #c9461d;   /* 朱赤系・建設業らしい力強さ */
  --color-accent-dark:   #a23414;
  --color-accent-light:  #e76a3d;
  --color-accent-50:     #fbede5;

  /* color: neutral */
  --color-black:    #14181f;
  --color-ink:      #1f2a3a;
  --color-text:     #233044;
  --color-text-sub: #506178;
  --color-muted:    #8a96a6;
  --color-line:     #d8dee7;
  --color-line-soft:#e8ecf2;
  --color-bg-soft:  #f5f7fa;
  --color-bg:       #ffffff;
  --color-white:    #ffffff;

  /* color: semantic */
  --color-success: #1f8a52;
  --color-warning: #d4a017;

  /* typography */
  --font-sans: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", "Meiryo", system-ui, -apple-system, sans-serif;
  --font-serif: "Noto Serif JP", "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;

  /* font-size */
  --fz-xs:    12px;
  --fz-sm:    13px;
  --fz-base:  16px;
  --fz-md:    17px;
  --fz-lg:    18px;
  --fz-xl:    20px;
  --fz-2xl:   24px;
  --fz-3xl:   28px;
  --fz-4xl:   34px;
  --fz-5xl:   42px;
  --fz-6xl:   54px;
  --fz-hero:  64px;

  /* line-height */
  --lh-tight:  1.25;
  --lh-snug:   1.45;
  --lh-normal: 1.7;
  --lh-loose:  1.9;

  /* spacing */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-7:  32px;
  --sp-8:  40px;
  --sp-9:  56px;
  --sp-10: 72px;
  --sp-11: 96px;
  --sp-12: 120px;

  /* layout */
  --container: 1180px;
  --container-narrow: 880px;
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 10px;

  /* shadow */
  --shadow-sm: 0 1px 2px rgba(10, 27, 52, 0.06), 0 1px 1px rgba(10, 27, 52, 0.04);
  --shadow-md: 0 4px 12px rgba(10, 27, 52, 0.08), 0 2px 4px rgba(10, 27, 52, 0.06);
  --shadow-lg: 0 12px 32px rgba(10, 27, 52, 0.12), 0 4px 8px rgba(10, 27, 52, 0.08);

  /* transitions */
  --transition-fast: 120ms ease;
  --transition:      180ms ease;
  --transition-slow: 280ms ease;

  /* header */
  --header-h:    72px;
  --header-h-sp: 60px;
}

@media (max-width: 768px) {
  :root {
    --fz-3xl: 22px;
    --fz-4xl: 26px;
    --fz-5xl: 30px;
    --fz-6xl: 36px;
    --fz-hero: 38px;
  }
}