/* ============================================
   variables.css — CSS カスタムプロパティ
   ============================================ */

:root {
  /* ---- カラー ---- */
  --color-primary:       #0055cc;
  --color-primary-dark:  #002b5c;
  --color-accent:        #fdd835;   /* 黄 */
  --color-accent-red:    #cc0000;   /* 赤（見出しアンダーライン） */
  /* CTA用アンバー。黄より彩度を落とし赤みを足した色（警告表示に見えるのを避ける）。
     #222222 の文字とのコントラスト比 7.3:1 */
  --color-cta:           #e8a33c;
  --color-cta-hover:     #f2b558;
  --color-text:          #222222;
  --color-text-sub:      #444444;
  --color-text-muted:    #666666;
  --color-white:         #ffffff;
  --color-bg:            #ffffff;
  --color-bg-light:      #f9f9f9;
  --color-bg-hero:       #f7f8fa;   /* ヒーロー背景。写真をマスクで溶かす先 */
  --color-bg-blue:       #e8f4ff;
  --color-border:        #cccccc;
  --color-border-light:  #dddddd;

  /* トップページの店舗カラー。既存ページの配色は維持する */
  --color-store-blue:    #4fb6ea;
  --color-store-paper:   #faf9f6;

  /* ---- タイポグラフィ ---- */
  --font-base: 'Helvetica Neue', 'Hiragino Kaku Gothic ProN', 'Hiragino Sans',
               Meiryo, sans-serif;

  --fs-xs:   0.75rem;   /*  12px */
  --fs-sm:   0.875rem;  /*  14px */
  --fs-base: 1rem;      /*  16px */
  --fs-md:   1.1rem;    /* ~18px */
  --fs-lg:   1.25rem;   /*  20px */
  --fs-xl:   1.4rem;    /* ~22px */
  --fs-2xl:  1.6rem;    /* ~26px */
  --fs-3xl:  2rem;      /*  32px */
  --fs-4xl:  2.2rem;    /* ~35px */
  --fs-5xl:  2.6rem;    /* ~42px */

  /* ---- 余白 ---- */
  --space-xs:  0.5rem;
  --space-sm:  1rem;
  --space-md:  1.5rem;
  --space-lg:  2rem;
  --space-xl:  3rem;
  --space-2xl: 4rem;

  /* ---- コンテナ ---- */
  --container-max:     1000px;
  --container-padding: 1rem;

  /* ---- 角丸 ---- */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-pill: 30px;
  --radius-full: 50%;

  /* ---- シャドウ ---- */
  --shadow-sm: 0 2px 4px  rgba(0, 0, 0, 0.05);
  --shadow-md: 0 2px 8px  rgba(0, 0, 0, 0.10);
  --shadow-lg: 0 4px 10px rgba(0, 0, 0, 0.20);
  --shadow-xl: 0 6px 20px rgba(0, 0, 0, 0.15);

  /* ---- トランジション ---- */
  --transition-base: 0.3s ease;
  --transition-slow: 0.4s ease;

  /* ---- z-index ---- */
  --z-header:        999;
  --z-hamburger:    1001;
  --z-overlay:      2000;
  --z-overlay-btn:  3000;
  --z-fixed-btn:    1000;
}