/* 個別でカラーを指定する際はこちらのCSS変数を使用ください */
:root {
  /* OFFICEPASSのカラーパレット */
  --op-black: #000000;
  --op-white: #ffffff;
  --op-blue-100: #E6F2FF;
  --op-blue-200: #B8DBFF;
  --op-blue-300: #75BAFF;
  --op-blue-400: #1A8CFF;
  --op-blue-500: #006EDB;
  --op-blue-600: #004F9D;
  --op-blue-700: #004080;
  --op-blue-800: #002E5C;
  --op-blue-900: #001C38;
  --op-yellow-100: #FFF6E0;
  --op-yellow-200: #FFDF9E;
  --op-yellow-300: #FFCB4C;
  --op-yellow-400: #FFB80A;
  --op-yellow-500: #E09D00;
  --op-yellow-600: #B88100;
  --op-yellow-700: #946800;
  --op-yellow-800: #6B4B00;
  --op-yellow-900: #382700;
  --op-red-100: #FCEFEE;
  --op-red-200: #FBD3D0;
  --op-red-300: #F6B3AC;
  --op-red-400: #ED6A5E;
  --op-red-500: #DC3D2D;
  --op-red-600: #C02F20;
  --op-red-700: #832016;
  --op-red-800: #53140E;
  --op-red-900: #300C08;
  --op-teal-100: #D2F4EA;
  --op-teal-200: #A6E9D5;
  --op-teal-300: #79DFC1;
  --op-teal-400: #4DD4AC;
  --op-teal-500: #20C997;
  --op-teal-600: #1AA179;
  --op-teal-700: #13795B;
  --op-teal-800: #0D503C;
  --op-teal-900: #06281E;
  --op-gray-100: #F8F9FB;
  --op-gray-200: #EBEFF4;
  --op-gray-300: #D7DDE5;
  --op-gray-400: #C4CBD4;
  --op-gray-500: #98A4B3;
  --op-gray-600: #717D8E;
  --op-gray-700: #4D5760;
  --op-gray-800: #343B41;
  --op-gray-900: #22262A;

  /* OFFICEPASSのテーマカラー */
  --op-primary: var(--op-blue-600);
  --op-secondary: var(--op-gray-600);
  --op-succes: var(--op-teal-600);
  --op-danger: var(--op-red-500);
  --op-warning: var(--op-yellow-500);
  --op-light: var(--op-white);
}

:root {
  /* BootstrapのベースカラーをOFFICEPASSカラーに合わせて設定 */
  --bs-body-color: var(--op-gray-900);
  --bs-body-bg: var(--op-white);
  --bs-secondary-color: var(--op-gray-600);
  --bs-secondary-bg: var(--op-gray-200);
  --bs-tertiary-color: var(--op-gray-500);
  --bs-tertiary-bg: var(--op-gray-100);
  --bs-border-color: var(--op-gray-300);
  --op-border-light-color: var(--op-gray-200);  /* OFFICEPASS独自のベースカラー */
  --bs-primary: var(--op-blue-600);
  --bs-primary-rgb: 0, 79, 157;
  --bs-primary-bg-subtle: var(--op-blue-100);
  --bs-primary-border-subtle: var(--op-blue-300);
  --bs-primary-text-emphasis: var(--op-blue-800);
  --bs-success: var(--op-teal-600);
  --bs-success-rgb: 26, 161, 121;
  --bs-success-bg-subtle: var(--op-teal-100);
  --bs-success-border-subtle: var(--op-teal-400);
  --bs-success-text-emphasis: var(--op-teal-800);
  --bs-danger: var(--op-red-500);
  --bs-danger-rgb: 220, 61, 45;
  --bs-danger-bg-subtle: var(--op-red-100);
  --bs-danger-border-subtle: var(--op-red-300);
  --bs-danger-text-emphasis: var(--op-red-800);
  --bs-secondary: var(--op-gray-600);
  --bs-secondary-rgb: 113, 125, 142;
  --bs-emphasis-color: var(--op-gray-900);
  --bs-form-invalid-color: var(--op-red-500);
  --bs-form-invalid-border-color: var(--op-red-500);
}

/* 背景色 */
.bg-blue-100 { background-color: var(--op-blue-100); }
.bg-blue-200 { background-color: var(--op-blue-200); }
.bg-blue-300 { background-color: var(--op-blue-300); }
.bg-blue-400 { background-color: var(--op-blue-400); }
.bg-blue-500 { background-color: var(--op-blue-500); }
.bg-blue-600 { background-color: var(--op-blue-600); }
.bg-blue-700 { background-color: var(--op-blue-700); } 
.bg-blue-800 { background-color: var(--op-blue-800); }
.bg-blue-900 { background-color: var(--op-blue-900); }
.bg-yellow-100 { background-color: var(--op-yellow-100); }
.bg-yellow-200 { background-color: var(--op-yellow-200); }
.bg-yellow-300 { background-color: var(--op-yellow-300); }
.bg-yellow-400 { background-color: var(--op-yellow-400); }
.bg-yellow-500 { background-color: var(--op-yellow-500); }
.bg-yellow-600 { background-color: var(--op-yellow-600); }
.bg-yellow-700 { background-color: var(--op-yellow-700); }
.bg-yellow-800 { background-color: var(--op-yellow-800); }
.bg-yellow-900 { background-color: var(--op-yellow-900); }
.bg-red-100 { background-color: var(--op-red-100); }
.bg-red-200 { background-color: var(--op-red-200); }
.bg-red-300 { background-color: var(--op-red-300); }
.bg-red-400 { background-color: var(--op-red-400); }
.bg-red-500 { background-color: var(--op-red-500); }
.bg-red-600 { background-color: var(--op-red-600); }
.bg-red-700 { background-color: var(--op-red-700); }
.bg-red-800 { background-color: var(--op-red-800); }
.bg-red-900 { background-color: var(--op-red-900); }
.bg-teal-100 { background-color: var(--op-teal-100); }
.bg-teal-200 { background-color: var(--op-teal-200); }
.bg-teal-300 { background-color: var(--op-teal-300); }
.bg-teal-400 { background-color: var(--op-teal-400); }
.bg-teal-500 { background-color: var(--op-teal-500); }
.bg-teal-600 { background-color: var(--op-teal-600); }
.bg-teal-700 { background-color: var(--op-teal-700); }
.bg-teal-800 { background-color: var(--op-teal-800); }
.bg-teal-900 { background-color: var(--op-teal-900); }
.bg-gray-100 { background-color: var(--op-gray-100); }
.bg-gray-200 { background-color: var(--op-gray-200); }
.bg-gray-300 { background-color: var(--op-gray-300); }
.bg-gray-400 { background-color: var(--op-gray-400); }
.bg-gray-500 { background-color: var(--op-gray-500);}
.bg-gray-600 { background-color: var(--op-gray-600); }
.bg-gray-700 { background-color: var(--op-gray-700); }
.bg-gray-800 { background-color: var(--op-gray-800); }
.bg-gray-900 { background-color: var(--op-gray-900); }

/* 文字色 */
.text-blue-100 { color: var(--op-blue-100) !important; }
.text-blue-200 { color: var(--op-blue-200) !important; }
.text-blue-300 { color: var(--op-blue-300) !important; }
.text-blue-400 { color: var(--op-blue-400) !important; }
.text-blue-500 { color: var(--op-blue-500) !important; }
.text-blue-600 { color: var(--op-blue-600) !important; }
.text-blue-700 { color: var(--op-blue-700) !important; }
.text-blue-800 { color: var(--op-blue-800) !important; }
.text-blue-900 { color: var(--op-blue-900) !important; }
.text-yellow-100 { color: var(--op-yellow-100) !important; }
.text-yellow-200 { color: var(--op-yellow-200) !important; }
.text-yellow-300 { color: var(--op-yellow-300) !important; }
.text-yellow-400 { color: var(--op-yellow-400) !important; }
.text-yellow-500 { color: var(--op-yellow-500) !important; }
.text-yellow-600 { color: var(--op-yellow-600) !important; }
.text-yellow-700 { color: var(--op-yellow-700) !important; }
.text-yellow-800 { color: var(--op-yellow-800) !important; }
.text-yellow-900 { color: var(--op-yellow-900) !important; }
.text-red-100 { color: var(--op-red-100) !important; }
.text-red-200 { color: var(--op-red-200) !important; }
.text-red-300 { color: var(--op-red-300) !important; }
.text-red-400 { color: var(--op-red-400) !important; }
.text-red-500 { color: var(--op-red-500) !important; }
.text-red-600 { color: var(--op-red-600) !important; }
.text-red-700 { color: var(--op-red-700) !important; }
.text-red-800 { color: var(--op-red-800) !important; }
.text-red-900 { color: var(--op-red-900) !important; }
.text-teal-100 { color: var(--op-teal-100) !important; }
.text-teal-200 { color: var(--op-teal-200) !important; }
.text-teal-300 { color: var(--op-teal-300) !important; }
.text-teal-400 { color: var(--op-teal-400) !important; }
.text-teal-500 { color: var(--op-teal-500) !important; }
.text-teal-600 { color: var(--op-teal-600) !important; }
.text-teal-700 { color: var(--op-teal-700) !important; }
.text-teal-800 { color: var(--op-teal-800) !important; }
.text-teal-900 { color: var(--op-teal-900) !important; }
.text-gray-100 { color: var(--op-gray-100) !important; }
.text-gray-200 { color: var(--op-gray-200) !important; }
.text-gray-300 { color: var(--op-gray-300) !important; }
.text-gray-400 { color: var(--op-gray-400) !important; }
.text-gray-500 { color: var(--op-gray-500) !important; }
.text-gray-600 { color: var(--op-gray-600) !important; }
.text-gray-700 { color: var(--op-gray-700) !important; }
.text-gray-800 { color: var(--op-gray-800) !important; }
.text-gray-900 { color: var(--op-gray-900) !important; }

/* ボーダー色 */
.border-blue-100 { border-color: var(--op-blue-100) !important; }
.border-blue-200 { border-color: var(--op-blue-200) !important; }
.border-blue-300 { border-color: var(--op-blue-300) !important; }
.border-blue-400 { border-color: var(--op-blue-400) !important; }
.border-blue-500 { border-color: var(--op-blue-500) !important; }
.border-blue-600 { border-color: var(--op-blue-600) !important; }
.border-blue-700 { border-color: var(--op-blue-700) !important; } 
.border-blue-800 { border-color: var(--op-blue-800) !important; }
.border-blue-900 { border-color: var(--op-blue-900) !important; }
.border-yellow-100 { border-color: var(--op-yellow-100) !important; }
.border-yellow-200 { border-color: var(--op-yellow-200) !important; }
.border-yellow-300 { border-color: var(--op-yellow-300) !important; }
.border-yellow-400 { border-color: var(--op-yellow-400) !important; }
.border-yellow-500 { border-color: var(--op-yellow-500) !important; }
.border-yellow-600 { border-color: var(--op-yellow-600) !important; }
.border-yellow-700 { border-color: var(--op-yellow-700) !important; }
.border-yellow-800 { border-color: var(--op-yellow-800) !important; }
.border-yellow-900 { border-color: var(--op-yellow-900) !important; }
.border-red-100 { border-color: var(--op-red-100) !important; }
.border-red-200 { border-color: var(--op-red-200) !important; }
.border-red-300 { border-color: var(--op-red-300) !important; }
.border-red-400 { border-color: var(--op-red-400) !important; }
.border-red-500 { border-color: var(--op-red-500) !important; }
.border-red-600 { border-color: var(--op-red-600) !important; }
.border-red-700 { border-color: var(--op-red-700) !important; }
.border-red-800 { border-color: var(--op-red-800) !important; }
.border-red-900 { border-color: var(--op-red-900) !important; }
.border-teal-100 { border-color: var(--op-teal-100) !important; }
.border-teal-200 { border-color: var(--op-teal-200) !important; }
.border-teal-300 { border-color: var(--op-teal-300) !important; }
.border-teal-400 { border-color: var(--op-teal-400) !important; }
.border-teal-500 { border-color: var(--op-teal-500) !important; }
.border-teal-600 { border-color: var(--op-teal-600) !important; }
.border-teal-700 { border-color: var(--op-teal-700) !important; }
.border-teal-800 { border-color: var(--op-teal-800) !important; }
.border-teal-900 { border-color: var(--op-teal-900) !important; }
.border-gray-100 { border-color: var(--op-gray-100) !important; }
.border-gray-200 { border-color: var(--op-gray-200) !important; }
.border-gray-300 { border-color: var(--op-gray-300) !important; }
.border-gray-400 { border-color: var(--op-gray-400) !important; }
.border-gray-500 { border-color: var(--op-gray-500) !important; }
.border-gray-600 { border-color: var(--op-gray-600) !important; }
.border-gray-700 { border-color: var(--op-gray-700) !important; }
.border-gray-800 { border-color: var(--op-gray-800) !important; }
.border-gray-900 { border-color: var(--op-gray-900) !important; }