/* ============================
   Tailwind 本体読み込み
============================ */
@import url("../css/tailwind.min.css");

/* ============================
   店舗テーマカラー（リトルスターラビット）
============================ */



/* ============================
   カスタムユーティリティ
============================ */
/* フォント */
@layer base {
  body {
    font-family:
      "Hiragino Maru Gothic ProN", /* macOS */
      "Yu Gothic Rounded",         /* Windows */
      "Noto Sans JP",              /* Android, ChromeOS */
      "Segoe UI",                  /* fallback for Western */
      "Helvetica Neue",
      Arial,
      sans-serif;
  }
}

/* カラーパレット（ベース色） */
:root{
  --baseBg:    #ffffff;
  --subBg:     #f8f9fc;
  --navy:      #1e214d;
  --navySoft:  #2a2f6e;
  --lineLight: #d6d9f0;
  --accentGold:#f4e4a3;
}

/* 単色ユーティリティ */
@layer utilities {
  /* 背景色 */
  .bg-baseBg    { background-color: var(--baseBg); }
  .bg-subBg     { background-color: var(--subBg); }
  .bg-navy      { background-color: var(--navy); }
  .bg-navySoft  { background-color: var(--navySoft); }
  .bg-accentGold{ background-color: var(--accentGold); }

  /* 文字色（不透明） */
  .text-navy       { color: var(--navy); }
  .text-navySoft   { color: var(--navySoft); }
  .text-accentGold { color: var(--accentGold); }

  /* 文字色（透過版：Tailwindの /xx を再現） */
  .text-navy\/90 { color: rgba(30,33,77,.90); }
  .text-navy\/80 { color: rgba(30,33,77,.80); }
  .text-navy\/70 { color: rgba(30,33,77,.70); }
  .text-navy\/60 { color: rgba(30,33,77,.60); }

  /* ボーダー色 */
  .border-lineLight { border-color: var(--lineLight); }

  /* リング offset 色（Tailwindの変数を上書き） */
  .ring-offset-subBg { --tw-ring-offset-color: var(--subBg); }

  /* 下線色（decoration-xxx/yy を明示）*/
  .decoration-accentGold\/60 { text-decoration-color: rgba(244,228,163,.6); }

  /* 影（デザイン指定） */
  .shadow-card        { box-shadow: 0 12px 30px rgba(0,0,40,.08); }
  .shadow-insetSoft   { box-shadow: inset 0 4px 12px rgba(0,0,40,.06); }
  .shadow-button      { box-shadow: 0 6px 12px rgba(0,0,40,.18); }
  .shadow-buttonHover { box-shadow: 0 10px 20px rgba(0,0,40,.28); }

  /* hover: プレフィックスも再現（Tailwind風クラス名を生CSSで対応） */
  .hover\:bg-navySoft:hover         { background-color: var(--navySoft); }
  .hover\:shadow-buttonHover:hover  { box-shadow: 0 10px 20px rgba(0,0,40,.28); }
  .hover\:text-navy:hover           { color: var(--navy); }

  /* 必要があれば追加（例） */
  .border-navy\/20   { border-color: rgba(30,33,77,.20); }
  .focus\:ring-navy\/30:focus { --tw-ring-color: rgba(30,33,77,.30); }
}

/* 画像ユーティリティ（必要なら使用） */
@layer utilities {
  .bg-main {
    background-image: url("./main.webp");
    background-size: cover;
    background-position: center;
  }
  .bg-interior {
    background-image: url("./interior.webp");
    background-size: cover;
    background-position: center;
  }
}