/* maestro-kiko.com : Color Tokens + Utilities
   ※ Tailwind 側から色指定を排除するための定義
*/

:root {
  /* Base colors */
  --mk-bg: #faf9f6;          /* 背景 */
  --mk-primary: #1a2b4b;     /* 文字/ネイビー */
  --mk-accent: #422006;      /* アクセント */
  --mk-gold: #164e63;        /* ラベル/日付 */
  --mk-white: #ffffff;
  --mk-black: #000000;

  /* Borders */
  --mk-border-subtle: rgba(0, 0, 0, 0.05); /* border-black/5 相当 */
  --mk-border-light: #dddddd;

  /* Text variants */
  --mk-text-muted: #444444;

  /* Shadows (rgba もここで管理) */
  --mk-shadow-card: 0 4px 10px rgba(0, 0, 0, 0.10);
  --mk-shadow-soft: 0 5px 15px rgba(0, 0, 0, 0.10);
  --mk-shadow-fab: 0 4px 6px rgba(0, 0, 0, 0.20);

  /* Drop shadow (Hero ロゴ用) */
  --mk-drop-shadow-hero: 0 2px 10px rgba(255, 255, 255, 0.50);

  /* ページ外側背景（左右余白に見える部分） */
  --mk-page-bg: var(--mk-bg);
}

/* body の背景を mk-page-bg に（後で色だけ差し替え可能） */
body{
  background-color: var(--mk-page-bg);
  color: var(--mk-primary);
}

/* 任意：クラスでも使えるように */
.mk-bg-page{
  background-color: var(--mk-page-bg);
}

/* ===== Utilities (colors only) ===== */
/* Background */
.mk-bg-base    { background-color: var(--mk-bg); }
.mk-bg-primary { background-color: var(--mk-primary); }
.mk-bg-hero    { background-color: var(--mk-black); }
.mk-bg-gold    { background-color: var(--mk-gold); }

/* Text */
.mk-text-primary { color: var(--mk-primary); }
.mk-text-accent  { color: var(--mk-accent); }
.mk-text-gold    { color: var(--mk-gold); }
.mk-text-white   { color: var(--mk-white); }
.mk-text-muted   { color: var(--mk-text-muted); }

/* Border colors */
.mk-border-subtle { border-color: var(--mk-border-subtle); }
.mk-border-light  { border-color: var(--mk-border-light); }

/* Shadows */
.mk-shadow-card { box-shadow: var(--mk-shadow-card); }
.mk-shadow-soft { box-shadow: var(--mk-shadow-soft); }
.mk-shadow-fab  { box-shadow: var(--mk-shadow-fab); }

/* Drop shadow */
.mk-drop-hero { filter: drop-shadow(var(--mk-drop-shadow-hero)); }