:root {
--primary: rgb(54, 84, 118);
--primary-content: rgb(245, 247, 250);

--accent: rgb(0, 151, 70);
--accent-content: rgb(237, 255, 245);

--mobile-header: rgb(62, 99, 139);

--gradient-from: rgba(54, 84, 118, 0.8);
--gradient-to: rgba(255, 255, 255, 0.8);

--base-100: rgb(255, 255, 255);
--base-200: rgb(248, 248, 248);
--base-300: rgb(238, 238, 238);
--base-content: rgb(24, 24, 27);
  
--color-work-btn: rgba(106, 151, 151, 0.2);
--color-work-content-btn: rgb(106, 151, 151);
--color-work-btn-hover: rgba(106, 151, 151, 0.4);
--color-work-content-btn-hover: rgb(106, 151, 151);
--color-instance-btn: rgba(132, 79, 132, 0.2);
--color-instance-content-btn: rgb(132, 79, 132);
--color-instance-btn-hover: rgba(132, 79, 132, 0.4);
--color-instance-content-btn-hover: rgb(132, 79, 132);
--color-item-btn: rgba(104, 105, 107, 0.2);
--color-item-content-btn: rgb(104, 105, 107);
--color-item-btn-hover: rgba(104, 105, 107, 0.4);
--color-item-content-btn-hover: rgb(104, 105, 107);
--color-authority-btn: rgba(249, 199, 24, 0.2);
--color-authority-content-btn: rgb(146, 64, 14);
--color-authority-btn-hover: rgba(249, 199, 24, 0.4);
--color-authority-content-btn-hover: rgb(146, 64, 14);

}

html[data-theme="dark"] {
  --primary: rgb(245, 247, 250);
  --primary-content: rgb(54, 84, 118);

  --accent: rgb(237, 255, 245);
  --accent-content: rgb(0, 151, 70);

  --mobile-header: rgb(62, 99, 139);

  --dark-gradient-from: rgba(54, 84, 118, 0.8);
  --dark-gradient-to: rgba(40, 42, 54, 0.8);

  --base-100: rgb(40, 42, 54);
  --base-200: rgb(35, 37, 48);
  --base-300: rgb(31, 32, 42);
  --base-content: rgb(248, 248, 243);
}