@import "theme-forgejo-dark.css";
@import "magpie-common.css";

:root {
  --magpie-rb-red: #b03a2e;
  --magpie-rb-orange: #c27c0e;
  --magpie-rb-yellow: #b7950b;
  --magpie-rb-green: #1e8449;
  --magpie-rb-teal: #148f77;
  --magpie-rb-blue: #2874a6;
  --magpie-rb-purple: #7d3c98;
  --magpie-rb-pink: #b0306f;

  --magpie-accent-strength: 50%;
  --magpie-tint: 14%;

  --color-primary: #1abc9c;
  --color-primary-contrast: #141414;
  --color-secondary: #3a3a3a;

  --color-body: #141414;
  --color-box-header: #232323;
  --color-box-body: #1e1e1e;
  --color-box-body-highlight: #262626;
  --color-nav-bg: #1e1e1e;
  --color-nav-hover-bg: #2a2a2a;
  --color-nav-text: #e4e7e9;
  --color-footer: #141414;
  --color-card: #1e1e1e;
  --color-menu: #1e1e1e;
  --color-button: #232323;
  --color-input-background: #181818;
  --color-input-toggle-background: #2a2a2a;
  --color-code-bg: #181818;
  --color-secondary-bg: #2a2a2a;
  --color-expand-button: #2a2a2a;
  --color-project-board-bg: #181818;
  --color-timeline: #3a3a3a;
  --color-reaction-bg: #ffffff12;
  --color-markup-table-row: #ffffff08;
  --color-markup-code-block: #ffffff10;
  --color-shadow: #00000066;

  --color-text-dark: #f1f1f1;
  --color-text: #e4e7e9;
  --color-text-light: #b8bec2;
  --color-text-light-1: #a4abb0;
  --color-text-light-2: #8f969b;
  --color-text-light-3: #7a8186;
  --color-placeholder-text: #8f969b;
  --color-input-text: #e4e7e9;

  --color-light: #00000030;
  --color-light-border: #ffffff26;
  --color-hover: #ffffff14;
  --color-active: #ffffff1f;

  --color-red: #e74c3c;
  --color-orange: #f39c12;
  --color-yellow: #f1c40f;
  --color-green: #27ae60;
  --color-teal: #1abc9c;
  --color-blue: #3498db;
  --color-purple: #9b59b6;
  --color-pink: #e84393;
  --color-primary-dark-1: color-mix(in srgb, var(--color-primary) 88%, white);
  --color-primary-dark-2: color-mix(in srgb, var(--color-primary) 76%, white);
  --color-primary-dark-3: color-mix(in srgb, var(--color-primary) 64%, white);
  --color-primary-dark-4: color-mix(in srgb, var(--color-primary) 52%, white);
  --color-primary-dark-5: color-mix(in srgb, var(--color-primary) 34%, white);
  --color-primary-dark-6: color-mix(in srgb, var(--color-primary) 16%, white);
  --color-primary-dark-7: color-mix(in srgb, var(--color-primary) 5%, white);
  --color-primary-light-1: color-mix(in srgb, var(--color-primary) 92%, black);
  --color-primary-light-2: color-mix(in srgb, var(--color-primary) 84%, black);
  --color-primary-light-3: color-mix(in srgb, var(--color-primary) 76%, black);
  --color-primary-light-4: color-mix(in srgb, var(--color-primary) 68%, black);
  --color-primary-light-5: color-mix(in srgb, var(--color-primary) 58%, black);
  --color-primary-light-6: color-mix(in srgb, var(--color-primary) 48%, black);
  --color-primary-light-7: color-mix(in srgb, var(--color-primary) 38%, black);
  --color-primary-alpha-10: color-mix(in srgb, var(--color-primary) 10%, transparent);
  --color-primary-alpha-20: color-mix(in srgb, var(--color-primary) 20%, transparent);
  --color-primary-alpha-30: color-mix(in srgb, var(--color-primary) 30%, transparent);
  --color-primary-alpha-40: color-mix(in srgb, var(--color-primary) 40%, transparent);
  --color-primary-alpha-50: color-mix(in srgb, var(--color-primary) 50%, transparent);
  --color-primary-alpha-60: color-mix(in srgb, var(--color-primary) 60%, transparent);
  --color-primary-alpha-70: color-mix(in srgb, var(--color-primary) 70%, transparent);
  --color-primary-alpha-80: color-mix(in srgb, var(--color-primary) 80%, transparent);
  --color-primary-alpha-90: color-mix(in srgb, var(--color-primary) 90%, transparent);
  --color-secondary-dark-1: color-mix(in srgb, var(--color-secondary) 93%, white);
  --color-secondary-dark-2: color-mix(in srgb, var(--color-secondary) 86%, white);
  --color-secondary-dark-3: color-mix(in srgb, var(--color-secondary) 79%, white);
  --color-secondary-dark-4: color-mix(in srgb, var(--color-secondary) 72%, white);
  --color-secondary-dark-5: color-mix(in srgb, var(--color-secondary) 65%, white);
  --color-secondary-dark-6: color-mix(in srgb, var(--color-secondary) 58%, white);
  --color-secondary-dark-7: color-mix(in srgb, var(--color-secondary) 51%, white);
  --color-secondary-dark-8: color-mix(in srgb, var(--color-secondary) 44%, white);
  --color-secondary-dark-9: color-mix(in srgb, var(--color-secondary) 37%, white);
  --color-secondary-dark-10: color-mix(in srgb, var(--color-secondary) 30%, white);
  --color-secondary-dark-11: color-mix(in srgb, var(--color-secondary) 23%, white);
  --color-secondary-dark-12: color-mix(in srgb, var(--color-secondary) 16%, white);
  --color-secondary-dark-13: color-mix(in srgb, var(--color-secondary) 9%, white);
  --color-secondary-light-1: color-mix(in srgb, var(--color-secondary) 88%, black);
  --color-secondary-light-2: color-mix(in srgb, var(--color-secondary) 76%, black);
  --color-secondary-light-3: color-mix(in srgb, var(--color-secondary) 64%, black);
  --color-secondary-light-4: color-mix(in srgb, var(--color-secondary) 52%, black);
  --color-secondary-alpha-10: color-mix(in srgb, var(--color-secondary) 10%, transparent);
  --color-secondary-alpha-20: color-mix(in srgb, var(--color-secondary) 20%, transparent);
  --color-secondary-alpha-30: color-mix(in srgb, var(--color-secondary) 30%, transparent);
  --color-secondary-alpha-40: color-mix(in srgb, var(--color-secondary) 40%, transparent);
  --color-secondary-alpha-50: color-mix(in srgb, var(--color-secondary) 50%, transparent);
  --color-secondary-alpha-60: color-mix(in srgb, var(--color-secondary) 60%, transparent);
  --color-secondary-alpha-70: color-mix(in srgb, var(--color-secondary) 70%, transparent);
  --color-secondary-alpha-80: color-mix(in srgb, var(--color-secondary) 80%, transparent);
}