/* ==========================================================================
   ROOTHIRSCH GIT, dark (default): the Operations anchor as the whole page.
   Stock dark theme underneath (syntax highlighting, editor, diffs), the
   Roothirsch rules from roothirsch-base.css on top, colours below.
   Fills keep the CI red with white text; red text gets a lighter shade so it
   stays readable on the dark surfaces.
   ========================================================================== */

@import url("./theme-forgejo-dark.css");
@import url("./roothirsch-base.css");

:root {
  color-scheme: dark;

  /* CI colours */
  --rh-red: #c01f21;
  --rh-red-bright: #e30f13;
  --rh-red-text: #f04a4c;
  --rh-red-text-hover: #ff7173;
  --rh-orange: #e94e17;

  /* Greys: light = borders and hover, medium = active, dark = muted icons */
  --rh-grey-light: #2a2a2e;
  --rh-grey-medium: #37373c;
  --rh-grey-dark: #56565c;

  /* Leitstand palette, dark: anchor < paper < zebra < panel */
  --rh-ink: #ececee;
  --rh-ink-soft: #a3a3a9;
  --rh-paper: #151517;
  --rh-zebra: #19191b;
  --rh-panel: #1f1f22;
  --rh-anchor: #0b0b0c;
  --rh-anchor-ink: #8e8e94;
  --rh-ok: #2e8a55;
  --rh-ok-text: #4fbf7f;

  /* Primary: Forgejo also uses it as text colour, so it is the readable red.
     Dark scale = lighter (more contrast), light scale = towards the page. */
  --color-primary: var(--rh-red-text);
  --color-primary-dark-1: #f36163;
  --color-primary-dark-2: #f57a7b;
  --color-primary-dark-3: #f89697;
  --color-primary-dark-4: #fab3b4;
  --color-primary-light-1: var(--rh-red-bright);
  --color-primary-light-2: var(--rh-red);
  --color-primary-light-3: #a31b1d;
  --color-primary-light-4: #861617;
  --color-primary-light-5: #5e1011;
  --color-primary-light-6: #3d0d0e;
  --color-primary-light-7: #2a0a0b;
  --color-primary-alpha-10: #e30f1319;
  --color-primary-alpha-20: #e30f1333;
  --color-primary-alpha-30: #e30f134b;
  --color-primary-alpha-40: #e30f1366;
  --color-primary-alpha-50: #e30f1380;
  --color-primary-alpha-60: #e30f1399;
  --color-primary-alpha-70: #e30f13b3;
  --color-primary-alpha-80: #e30f13cc;
  --color-primary-alpha-90: #e30f13e1;
  --color-primary-active: var(--rh-red);

  /* Secondary scale beyond the tokens: lighter = more contrast */
  --color-secondary-dark-6: #66666c;
  --color-secondary-dark-7: #77777d;
  --color-secondary-dark-8: #88888e;
  --color-secondary-dark-9: #96969c;
  --color-secondary-dark-11: #bdbdc2;
  --color-secondary-dark-12: #d4d4d8;
  --color-secondary-dark-13: #e4e4e7;
  --color-secondary-alpha-10: #37373c19;
  --color-secondary-alpha-20: #37373c33;
  --color-secondary-alpha-30: #37373c4b;
  --color-secondary-alpha-40: #37373c66;
  --color-secondary-alpha-50: #37373c80;
  --color-secondary-alpha-60: #37373c99;
  --color-secondary-alpha-70: #37373cb3;
  --color-secondary-alpha-80: #37373ccc;
  --color-secondary-alpha-90: #37373ce1;

  /* Status shades */
  --color-red-dark-1: #ad1c1e;
  --color-red-dark-2: #9a191a;
  --color-orange-light: #ef6a3a;
  --color-orange-dark-1: #d24514;
  --color-orange-dark-2: #ba3d12;
  --color-green-light: #3aa368;
  --color-green-dark-1: #26744a;
  --color-green-dark-2: #20623e;
  --color-grey-light: #77777d;
  --color-black: var(--rh-anchor);
  --color-black-light: var(--rh-grey-light);

  --color-error-border: #6a1415;
  --color-error-bg: #2b0f10;
  --color-error-bg-active: #3d1213;
  --color-error-bg-hover: #3d1213;
  --color-error-text: #ffb3b4;
  --color-success-border: #1f5a39;
  --color-success-bg: #12251a;
  --color-success-text: #9fe0b8;
  --color-warning-border: #7a3412;
  --color-warning-bg: #2a170d;
  --color-warning-text: #ffc4a8;
  --color-red-badge: var(--rh-red-text);
  --color-red-badge-bg: #e30f1326;
  --color-red-badge-hover-bg: #e30f1347;
  --color-green-badge: var(--rh-ok-text);
  --color-green-badge-bg: #2e8a5533;
  --color-green-badge-hover-bg: #2e8a5555;
  --color-orange-badge: var(--rh-orange);
  --color-orange-badge-bg: #e94e1726;
  --color-orange-badge-hover-bg: #e94e1747;

  /* Text and the remaining surfaces */
  --color-text-dark: #ffffff;
  --color-text-light: #d6d6da;
  --color-text-light-1: #c4c4c9;
  --color-text-light-3: #8e8e94;
  --color-input-toggle-background: var(--rh-grey-medium);
  --color-header-wrapper-transparent: #1f1f2200;
  --color-light-border: #ffffff14;
  --color-tooltip-bg: #37373cf5;
  --color-tooltip-text: #ffffff;
  --color-small-accent: var(--color-primary-light-5);
  --color-highlight-fg: #f57a7b;
  --color-highlight-bg: #e30f1333;
  --color-shadow: #00000060;
}
