/* Kaltenecker KG — derived from forgejo-auto. @import must stay first. */
@import url("theme-forgejo-auto.css");

:root {
  /* --- Neutrals: Forgejo zinc -> KKG gray (Tailwind gray) ---------------
     Half-steps are sRGB midpoints of the adjacent Tailwind stops, which is
     how Forgejo builds its own half-steps. --color-body stays #fff. */
  --zinc-50: #f9fafb;
  --zinc-100: #f3f4f6;
  --zinc-150: #eceef0;
  --zinc-200: #e5e7eb;
  --zinc-250: #dbdee3;
  --zinc-300: #d1d5db;
  --zinc-350: #b6bcc5;
  --zinc-400: #9ca3af;
  --zinc-450: #848a98;
  --zinc-500: #6b7280;
  --zinc-550: #5b6472;
  --zinc-600: #4b5563;
  --zinc-650: #414b5a;
  --zinc-700: #374151;
  --zinc-750: #2b3544;
  --zinc-800: #1f2937;
  --zinc-850: #18202f;
  --zinc-900: #111827;

  /* --- Brand orange ----------------------------------------------------
     `a { color: var(--color-primary) }` — this variable is every link in a
     text-dense forge, so it carries the brand hue at a darkness that clears
     WCAG AA rather than the literal #F25E0D (only 3.29:1 on white).
     #C74B09 is 4.73:1 on #fff and 4.53:1 on the --color-box-body cards.
     The literal brand orange is used below, where it is a background. */
  --color-primary: #c74b09;
  --color-primary-hover: #a33c06;   /* 6.55:1 */
  --color-primary-active: #863105;  /* 8.55:1 */

  /* accent-color on form controls, focus rings, --color-small-accent */
  --color-accent: #f25e0d;

  /* Translucent brand tints (reaction pills, highlights, focus shadows).
     Backgrounds only, so the exact brand orange is safe here. */
  --color-primary-alpha-10: #f25e0d19;
  --color-primary-alpha-20: #f25e0d33;
  --color-primary-alpha-30: #f25e0d4b;
  --color-primary-alpha-40: #f25e0d66;
  --color-primary-alpha-50: #f25e0d80;
  --color-primary-alpha-60: #f25e0d99;
  --color-primary-alpha-70: #f25e0db3;
  --color-primary-alpha-80: #f25e0dcc;
  --color-primary-alpha-90: #f25e0de1;
}

@media (prefers-color-scheme: dark) {
  :root {
    /* --- Neutrals: Forgejo steel -> KKG gray dark surfaces -------------
       Anchored on the design system's dark ramp: bg-alt #0d1320,
       bg #111827, surface #1f2937, surface-raised #273244, border #374151.
       Steps between anchors are sRGB midpoints. */
    --steel-900: #0d1320;
    --steel-850: #0f1624;
    --steel-800: #111827;
    --steel-750: #18202f;
    --steel-700: #1f2937;
    --steel-650: #273244;
    --steel-600: #2f3a4a;
    --steel-550: #374151;
    --steel-500: #414b5a;
    --steel-450: #4b5563;
    --steel-400: #5b6472;
    --steel-350: #6b7280;
    --steel-300: #848a98;
    --steel-250: #9ca3af;
    --steel-200: #b6bcc5;
    --steel-150: #d1d5db;
    --steel-100: #e5e7eb;

    /* --steel-100 also feeds --color-secondary-dark-10..13 (hover borders),
       so it is held at gray-200 and the body text is lifted separately to
       the design system's #f9fafb — 16.98:1 on --color-body. */
    --color-text: #f9fafb;

    /* #F25E0D is 5.39:1 on the body but only 4.46:1 on --color-box-body
       cards, which is where most links actually sit. #F3681C is the same
       hue nudged 6% toward white: 5.75:1 on the body, 4.76:1 on cards. */
    --color-primary: #f3681c;
    --color-primary-hover: #fb923c;   /* the design system's dark hover */
    --color-primary-active: #fdba74;

    --color-accent: #fb923c;

    --color-primary-alpha-10: #f25e0d19;
    --color-primary-alpha-20: #f25e0d33;
    --color-primary-alpha-30: #f25e0d4b;
    --color-primary-alpha-40: #f25e0d66;
    --color-primary-alpha-50: #f25e0d80;
    --color-primary-alpha-60: #f25e0d99;
    --color-primary-alpha-70: #f25e0db3;
    --color-primary-alpha-80: #f25e0dcc;
    --color-primary-alpha-90: #f25e0de1;
  }
}

/* Primary buttons are the loudest brand surface, and Forgejo paints them
   from --color-primary — the same variable as link text. Painting them
   here instead lets the button carry the exact brand orange while links
   keep their AA-safe shade. Label contrast (#fff at 3.29:1, #000 at
   6.38:1) matches what the authentik brand already ships. */
.ui.primary.button,
.ui.primary.buttons .button {
  background: #f25e0d;
}
.ui.primary.button:hover,
.ui.primary.buttons .button:hover,
.ui.primary.button:focus,
.ui.primary.buttons .button:focus {
  background: #ea580c;
}
@media (prefers-color-scheme: dark) {
  .ui.primary.button:hover,
  .ui.primary.buttons .button:hover,
  .ui.primary.button:focus,
  .ui.primary.buttons .button:focus {
    background: #fb923c;
  }
}