/* type3.gwebs.jp テーマシステム - CSS変数定義 */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;400;500;700&family=Noto+Serif+JP:wght@400;700&family=Zen+Maru+Gothic:wght@400;500;700&display=swap');

/* ==================== ブルー系 ==================== */
:root.theme-blue-dark {
  --sky: #0070c0;
  --sky-deep: #004a94;
  --sky-light: #cce5ff;
  --sky-pale: #f0f7ff;
  --azure: #0070c0;
  --theme-color: #0070c0;
}
:root.theme-blue-medium {
  --sky: #4fc3f7;
  --sky-deep: #0277bd;
  --sky-light: #b3e5fc;
  --sky-pale: #e1f5fe;
  --azure: #4fc3f7;
  --theme-color: #4fc3f7;
}
:root.theme-blue-light {
  --sky: #b3e5fc;
  --sky-deep: #01579b;
  --sky-light: #e1f5fe;
  --sky-pale: #f0f8ff;
  --azure: #81d4fa;
  --theme-color: #b3e5fc;
}

/* ==================== グリーン系 ==================== */
:root.theme-green-dark {
  --sky: #2e7d32;
  --sky-deep: #1b5e20;
  --sky-light: #c8e6c9;
  --sky-pale: #f1f8e9;
  --azure: #2e7d32;
  --theme-color: #2e7d32;
}
:root.theme-green-medium {
  --sky: #81c784;
  --sky-deep: #388e3c;
  --sky-light: #c8e6c9;
  --sky-pale: #f1f8e9;
  --azure: #66bb6a;
  --theme-color: #81c784;
}
:root.theme-green-light {
  --sky: #c8e6c9;
  --sky-deep: #1b5e20;
  --sky-light: #f1f8e9;
  --sky-pale: #f1f8e9;
  --azure: #a5d6a7;
  --theme-color: #c8e6c9;
}

/* ==================== ピンク系 ==================== */
:root.theme-pink-dark {
  --sky: #c2185b;
  --sky-deep: #880e4f;
  --sky-light: #f8bbd0;
  --sky-pale: #fce4ec;
  --azure: #c2185b;
  --theme-color: #c2185b;
}
:root.theme-pink-medium {
  --sky: #f06292;
  --sky-deep: #c2185b;
  --sky-light: #f8bbd0;
  --sky-pale: #fce4ec;
  --azure: #f06292;
  --theme-color: #f06292;
}
:root.theme-pink-light {
  --sky: #f8bbd0;
  --sky-deep: #880e4f;
  --sky-light: #fce4ec;
  --sky-pale: #fce4ec;
  --azure: #f48fb1;
  --theme-color: #f8bbd0;
}

/* ==================== レッド系 ==================== */
:root.theme-red-dark {
  --sky: #d32f2f;
  --sky-deep: #b71c1c;
  --sky-light: #ffcdd2;
  --sky-pale: #ffebee;
  --azure: #d32f2f;
  --theme-color: #d32f2f;
}
:root.theme-red-medium {
  --sky: #ef5350;
  --sky-deep: #d32f2f;
  --sky-light: #ffcdd2;
  --sky-pale: #ffebee;
  --azure: #ef5350;
  --theme-color: #ef5350;
}
:root.theme-red-light {
  --sky: #ffcdd2;
  --sky-deep: #b71c1c;
  --sky-light: #ffebee;
  --sky-pale: #ffebee;
  --azure: #ff5252;
  --theme-color: #ffcdd2;
}

/* ==================== オレンジ系 ==================== */
:root.theme-orange-dark {
  --sky: #f57c00;
  --sky-deep: #e65100;
  --sky-light: #ffe0b2;
  --sky-pale: #fff3e0;
  --azure: #f57c00;
  --theme-color: #f57c00;
}
:root.theme-orange-medium {
  --sky: #ffb74d;
  --sky-deep: #f57c00;
  --sky-light: #ffe0b2;
  --sky-pale: #fff3e0;
  --azure: #ffb74d;
  --theme-color: #ffb74d;
}
:root.theme-orange-light {
  --sky: #ffe0b2;
  --sky-deep: #e65100;
  --sky-light: #fff3e0;
  --sky-pale: #fff3e0;
  --azure: #ffb74d;
  --theme-color: #ffe0b2;
}

/* ==================== ホワイト系 ==================== */
:root.theme-white-dark {
  --sky: #424242;
  --sky-deep: #212121;
  --sky-light: #eeeeee;
  --sky-pale: #f5f5f5;
  --azure: #424242;
  --theme-color: #424242;
}
:root.theme-white-medium {
  --sky: #bdbdbd;
  --sky-deep: #424242;
  --sky-light: #e0e0e0;
  --sky-pale: #f5f5f5;
  --azure: #9e9e9e;
  --theme-color: #bdbdbd;
}
:root.theme-white-light {
  --sky: #eeeeee;
  --sky-deep: #212121;
  --sky-light: #f5f5f5;
  --sky-pale: #fafafa;
  --azure: #bdbdbd;
  --theme-color: #eeeeee;
}

/* ==================== テーマフォント定義 ==================== */
:root.theme-font-serif-jp { --theme-font-family: 'Noto Serif JP', serif; }
:root.theme-font-sans-jp { --theme-font-family: 'Noto Sans JP', sans-serif; }
:root.theme-font-sans-jp-rounded { --theme-font-family: 'Zen Maru Gothic', sans-serif; }

/* ==================== デフォルトテーマ（ブルー・ゴシック） ==================== */
:root {
  --sky: #0EA5E9;
  --sky-deep: #0369A1;
  --sky-light: #BAE6FD;
  --sky-pale: #F0F9FF;
  --azure: #38BDF8;
  --theme-color: #0070c0;
  --theme-font-family: 'Noto Sans JP', sans-serif;
}