/*
 * terminal-modern theme for Forgejo 15.
 *
 * Additive theme, registered beside the immutable legacy theme-terminal.css.
 * It imports Forgejo's supported dark-theme baseline, then maps the approved
 * terminal-modern "modern-dark" semantic tokens (frontend/THEME-MODERN.md)
 * onto Forgejo 15's public theme variables and a targeted set of UI
 * selectors. It keeps the phosphor-green / near-black identity and the
 * texas_terminal mark, and modernizes typography (mixed mono/sans),
 * spacing, radii, surfaces, and interaction states.
 *
 * Nothing here mutates the legacy theme or the canonical mark assets.
 */

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

:root {
  color-scheme: dark;

  /* ---- terminal-modern semantic tokens (modern-dark scope) ----
     Named here so the Forgejo-variable mapping below stays auditable
     against frontend/THEME-MODERN.md. */
  --font-mono: "Berkeley Mono", "JetBrains Mono", "Fira Code", "SF Mono",
    "Cascadia Code", "Source Code Pro", ui-monospace, monospace;
  --font-sans: "Inter", "IBM Plex Sans", "Segoe UI", system-ui, -apple-system,
    "Helvetica Neue", Arial, sans-serif;

  --tm-bg-deep: #0a0d0b;
  --tm-bg-canvas: #0e120f;
  --tm-bg-surface: #171d18;
  --tm-bg-surface-raised: #1b221c;
  --tm-bg-surface-overlay: #202920;
  --tm-bg-hover: #1f2820;
  --tm-bg-selected: #1c3324;
  --tm-bg-input: #10140f;
  --tm-bg-code: #0d110e;

  --tm-border-subtle: #232b24;
  --tm-border-default: #36432f;
  --tm-border-strong: #5f7261;
  --tm-border-focus: #5be08a;

  --tm-text-strong: #eef6ef;
  --tm-text-body: #c7d4c9;
  --tm-text-muted: #8fa393;
  --tm-text-disabled: #576359;
  --tm-text-on-accent: #06180d;
  --tm-text-link: #6fe6a0;
  --tm-text-link-hover: #8bf0b4;

  --tm-accent: #33ff66;
  --tm-accent-hover: #52ff81;
  --tm-accent-active: #23d452;
  --tm-accent-muted: #1d3d29;

  --tm-status-success: #35e07a;
  --tm-status-success-bg: #12281c;
  --tm-status-warning: #ffb648;
  --tm-status-warning-bg: #2c2110;
  --tm-status-error: #ff6a6a;
  --tm-status-error-bg: #2c1414;
  --tm-status-info: #5fc7ff;
  --tm-status-info-bg: #10222c;

  --tm-focus-ring: #7effac;

  /* ---- Typography: sans for body/prose, mono for chrome/controls/code ---- */
  --fonts-proportional: var(--font-sans);
  --fonts-monospace: var(--font-mono);

  /* ---- Radii: modern, softer than legacy 2px ---- */
  --border-radius: 5px;
  --border-radius-medium: 8px;

  /* ---- Primary (phosphor-green accent) ---- */
  --color-primary: #33ff66;
  --color-primary-contrast: #06180d;
  --color-primary-hover: #52ff81;
  --color-primary-active: #23d452;
  --color-primary-dark-1: #52ff81;
  --color-primary-dark-2: #6bff94;
  --color-primary-dark-3: #85ffa8;
  --color-primary-dark-4: #9fffbb;
  --color-primary-dark-5: #b8ffce;
  --color-primary-dark-6: #d2ffe1;
  --color-primary-dark-7: #ebfff2;
  --color-primary-light-1: #2ce65b;
  --color-primary-light-2: #26cc51;
  --color-primary-light-3: #20b347;
  --color-primary-light-4: #1a993d;
  --color-primary-light-5: #148033;
  --color-primary-light-6: #0e6629;
  --color-primary-light-7: #084d1f;
  --color-primary-alpha-10: #33ff6619;
  --color-primary-alpha-20: #33ff6633;
  --color-primary-alpha-30: #33ff664d;
  --color-primary-alpha-40: #33ff6666;
  --color-primary-alpha-50: #33ff6680;
  --color-primary-alpha-60: #33ff6699;
  --color-primary-alpha-70: #33ff66b3;
  --color-primary-alpha-80: #33ff66cc;
  --color-primary-alpha-90: #33ff66e6;

  /* ---- Secondary (greenish neutral surfaces/borders/text ramp) ---- */
  --color-secondary: #36432f;
  --color-secondary-dark-1: #45543c;
  --color-secondary-dark-2: #52654a;
  --color-secondary-dark-3: #5f7261;
  --color-secondary-dark-4: #6f8271;
  --color-secondary-dark-5: #7f9382;
  --color-secondary-dark-6: #8fa393;
  --color-secondary-dark-7: #a1b3a4;
  --color-secondary-dark-8: #c7d4c9;
  --color-secondary-dark-9: #d3ded5;
  --color-secondary-dark-10: #e0eae1;
  --color-secondary-dark-11: #eef6ef;
  --color-secondary-dark-12: #eef6ef;
  --color-secondary-dark-13: #eef6ef;
  --color-secondary-light-1: #1b221c;
  --color-secondary-light-2: #171d18;
  --color-secondary-light-3: #0e120f;
  --color-secondary-light-4: #0a0d0b;
  --color-secondary-alpha-10: #36432f19;
  --color-secondary-alpha-20: #36432f33;
  --color-secondary-alpha-30: #36432f4d;
  --color-secondary-alpha-40: #36432f66;
  --color-secondary-alpha-50: #36432f80;
  --color-secondary-alpha-60: #36432f99;
  --color-secondary-alpha-70: #36432fb3;
  --color-secondary-alpha-80: #36432fcc;
  --color-secondary-alpha-90: #36432fe6;
  --color-secondary-hover: #1f2820;
  --color-secondary-active: #202920;

  /* ---- Surfaces ---- */
  --color-body: #0e120f;
  --color-box-header: #1b221c;
  --color-box-body: #171d18;
  --color-box-body-highlight: #1f2820;
  --color-footer: #0a0d0b;
  --color-header-wrapper: #0e120f;
  --color-header-wrapper-transparent: #0e120f00;
  --color-menu: #171d18;
  --color-card: #171d18;
  --fancy-card-bg: #1b221c;
  --fancy-card-border: #5f7261;
  --color-secondary-bg: #1b221c;
  --color-button: #1b221c;
  --color-hover: #1f2820;
  --color-active: #202920;
  --color-light: #1b221c;
  --color-light-border: #5f7261;
  --color-shadow: #000000;
  --color-overlay-backdrop: #0a0d0bcc;

  /* ---- Text hierarchy ---- */
  --color-text-dark: #eef6ef;
  --color-text: #c7d4c9;
  --color-text-light: #8fa393;
  --color-text-light-1: #8fa393;
  --color-text-light-2: #8fa393;
  --color-text-light-3: #8fa393;
  --color-text-focus: #eef6ef;
  --color-placeholder-text: #8fa393;
  --color-caret: #eef6ef;

  /* ---- Inputs ---- */
  --color-input-background: #10140f;
  --color-input-toggle-background: #1b221c;
  --color-input-border: #5f7261;
  --color-input-border-hover: #5be08a;
  --color-input-text: #eef6ef;

  /* ---- Nav ---- */
  --color-nav-bg: #0e120f;
  --color-nav-hover-bg: #1f2820;
  --color-secondary-nav-bg: #0e120f;

  /* ---- Labels ---- */
  --color-label-text: #eef6ef;
  --color-label-bg: #1b221c;
  --color-label-hover-bg: #202920;
  --color-label-active-bg: #1b221c;
  --color-label-bg-alt: #202920;

  /* ---- Accent / highlight / selection ---- */
  --color-accent: #33ff66;
  --color-small-accent: #52ff81;
  --color-highlight-fg: #33ff66;
  --color-highlight-bg: #33ff6633;
  --color-selection-bg: #33ff6640;
  --color-selection-fg: #eef6ef;

  /* ---- Status hues ---- */
  --color-red: #ff6a6a;
  --color-red-light: #ff9a9a;
  --color-red-dark-1: #e65f5f;
  --color-red-dark-2: #cc5555;
  --color-thin-red: #ff6a6a;
  --color-thin-red-highlight: #ff9a9a;
  --color-yellow: #ffb648;
  --color-yellow-light: #ffc86e;
  --color-yellow-dark-1: #e6a340;
  --color-yellow-dark-2: #cc9139;
  --color-green: #35e07a;
  --color-green-light: #5be89a;
  --color-thin-green: #35e07a;
  --color-danger-bg: #2c1414;

  /* ---- Message banners ---- */
  --color-error-border: #ff6a6a;
  --color-error-bg: #2c1414;
  --color-error-bg-active: #451f1f;
  --color-error-bg-hover: #3a1a1a;
  --color-error-text: #eef6ef;
  --color-warning-border: #ffb648;
  --color-warning-bg: #2c2110;
  --color-warning-text: #eef6ef;
  --color-success-border: #35e07a;
  --color-success-bg: #12281c;
  --color-success-text: #eef6ef;
  --color-info-border: #5fc7ff;
  --color-info-bg: #10222c;
  --color-info-text: #eef6ef;

  /* ---- Diff ---- */
  --color-diff-removed-word-bg: #661b1b;
  --color-diff-added-word-bg: #164d24;
  --color-diff-removed-row-bg: #2c1414;
  --color-diff-moved-row-bg: #2c2110;
  --color-diff-added-row-bg: #123420;
  --color-diff-removed-row-border: #ff6a6a;
  --color-diff-moved-row-border: #ffb648;
  --color-diff-added-row-border: #35e07a;

  /* ---- Code ---- */
  --color-code-bg: #0d110e;
  --color-code-sidebar-bg: #0a0d0b;
  --color-markup-code-block: #0d110e;
  --color-markup-code-inline: #1b221c;
  --color-markup-table-row: #1b221c;
}

/* =======================================================================
   Typography hierarchy: mono for branding, headings, labels, controls,
   navigation, and code; sans for body copy and prose.
   ======================================================================= */
h1, h2, h3, h4, h5, h6,
.ui.header,
.breadcrumb,
#navbar, .navbar,
.ui.menu, .ui.tabular.menu,
.ui.label, .ui.labels .label,
.ui.button, .button,
input, textarea, select, label,
.ui.dropdown,
code, kbd, pre, samp,
.file-name, .commit-summary, .sha.label,
.repository .header-wrapper .flex-item-title {
  font-family: var(--font-mono);
}

.ui.header {
  letter-spacing: -0.01em;
}

/* Prose / long-form body copy stays sans for reading comfort. */
:is(.markup, .comment-body, .comment-content, .render-content, .repo-description) {
  font-family: var(--font-sans);
}

/* Prose headings and inline/block code remain mono. */
:is(.markup, .comment-body, .comment-content, .render-content)
  :is(h1, h2, h3, h4, h5, h6, code, kbd, pre, samp, tt) {
  font-family: var(--font-mono);
}

/* =======================================================================
   Surfaces: Forgejo 15 is flat-first. Keep shadows off, boundaries real.
   ======================================================================= */
:is(
  .ui.segment,
  .ui.segments,
  .ui.card,
  .ui.cards > .card,
  .ui.menu,
  .ui.dropdown .menu,
  details.dropdown > .content
) {
  box-shadow: none !important;
}

:is(.ui.segment, .ui.segments, .ui.card, .ui.cards > .card) {
  border-color: var(--tm-border-default) !important;
  border-radius: var(--border-radius-medium) !important;
}

:is(.ui.card, .ui.cards > .card) {
  background: var(--tm-bg-surface) !important;
}

:is(.ui.segment, .ui.card, .ui.cards > .card):hover {
  border-color: var(--tm-border-strong) !important;
}

/* =======================================================================
   Dropdown / menu overlays.
   ======================================================================= */
details.dropdown {
  --dropdown-box-shadow: none;
}

:is(.ui.dropdown .menu, details.dropdown > .content) {
  background: var(--tm-bg-surface-overlay) !important;
  border: 1px solid var(--tm-border-default) !important;
  border-radius: var(--border-radius-medium) !important;
}

:is(
  .ui.dropdown .menu > .item:hover,
  details.dropdown > .content > ul > li > :is(a, button):hover
) {
  background: var(--tm-bg-hover) !important;
  color: var(--tm-text-strong) !important;
}

:is(
  .ui.dropdown .menu > .active.item,
  details.dropdown > .content > ul > li > :is(a, button).active
) {
  background: var(--tm-bg-selected) !important;
  box-shadow: inset 2px 0 0 var(--tm-accent) !important;
  color: var(--tm-text-strong) !important;
}

/* =======================================================================
   Form controls: resting boundary is visible without hover/focus.
   ======================================================================= */
:is(input:not([type="hidden"]), textarea, select, .ui.selection.dropdown) {
  border-color: var(--tm-border-strong);
  border-style: solid;
  border-width: 1px;
  border-radius: var(--border-radius);
}

:is(input:not([type="hidden"]), textarea, select, .ui.selection.dropdown):hover {
  border-color: var(--tm-border-focus);
}

/* =======================================================================
   Buttons.
   ======================================================================= */
:is(.ui.button, .button) {
  border: 1px solid var(--tm-border-strong) !important;
  border-radius: var(--border-radius) !important;
  box-shadow: none !important;
}

.ui.basic.button:not(.primary, .red, .negative, .orange, .yellow) {
  background: var(--tm-bg-surface-raised) !important;
  border: 1px solid var(--tm-border-strong) !important;
  color: var(--tm-text-strong) !important;
}

.ui.basic.button:not(.primary, .red, .negative, .orange, .yellow):hover {
  background: var(--tm-bg-hover) !important;
  border-color: var(--tm-border-focus) !important;
}

:is(.ui.primary.button, .button.primary) {
  background: var(--tm-accent) !important;
  border: 1px solid var(--tm-accent) !important;
  color: var(--tm-text-on-accent) !important;
  font-weight: 600 !important;
}

:is(.ui.primary.button, .button.primary):hover {
  background: var(--tm-accent-hover) !important;
  border-color: var(--tm-accent-hover) !important;
  color: var(--tm-text-on-accent) !important;
}

:is(.ui.primary.button, .button.primary):active {
  background: var(--tm-accent-active) !important;
  border-color: var(--tm-accent-active) !important;
}

:is(.ui.red.button, .ui.negative.button, .ui.basic.red.button, .button.danger) {
  background: var(--tm-status-error) !important;
  border: 1px solid var(--tm-status-error) !important;
  color: #2c1414 !important;
}

:is(.ui.red.button, .ui.negative.button, .ui.basic.red.button, .button.danger):hover {
  background: var(--tm-status-error-bg) !important;
  border-color: var(--tm-status-error) !important;
  color: var(--tm-status-error) !important;
}

:is(.ui.orange.button, .ui.yellow.button) {
  background: var(--tm-status-warning) !important;
  border: 1px solid var(--tm-status-warning) !important;
  color: #2c2110 !important;
}

/* =======================================================================
   Tabs.
   ======================================================================= */
.ui.tabular.menu .item {
  border-bottom: 2px solid transparent !important;
  border-radius: 0 !important;
}

.ui.tabular.menu .active.item,
.ui.secondary.pointing.menu .active.item {
  background: transparent !important;
  border-bottom-color: var(--tm-accent) !important;
  color: var(--tm-text-strong) !important;
}

/* =======================================================================
   Links: prose links carry an underline so they never rely on color alone.
   ======================================================================= */
a:hover {
  color: var(--color-primary-hover);
}

:is(
  .markup,
  .comment-body,
  .comment-content,
  .repo-description,
  .issue-description
) a[href]:not(.anchor, .button, .label, .silenced) {
  text-decoration-line: underline !important;
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.16em;
}

:is(
  .markup,
  .comment-body,
  .comment-content,
  .repo-description,
  .issue-description
) a[href]:not(.anchor, .button, .label, .silenced):is(:hover, :focus-visible) {
  color: var(--tm-text-link-hover);
  text-decoration-thickness: 2px;
}

:is(#navbar, .ui.menu, .ui.tabular.menu, details.dropdown) a,
a:is(.ui.button, .button) {
  text-decoration-line: none !important;
}

/* =======================================================================
   Focus: a visible ring that flat/shadow resets never remove, using the
   modern focus-ring color with a dark offset so it reads over any surface.
   ======================================================================= */
:is(
  a[href],
  button,
  input,
  textarea,
  select,
  summary,
  [role="button"],
  [role="tab"],
  [tabindex]:not([tabindex="-1"])
):focus-visible {
  outline: 2px solid var(--tm-focus-ring) !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 2px var(--tm-bg-canvas), 0 0 0 4px var(--tm-focus-ring) !important;
}

/* =======================================================================
   Code / diff readability.
   ======================================================================= */
.code-view :is(.lines-code, .lines-num) {
  font-size: 13px !important;
  line-height: 1.55 !important;
}

/* =======================================================================
   Scrollbars.
   ======================================================================= */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: var(--tm-bg-canvas);
}

::-webkit-scrollbar-thumb {
  background: var(--tm-border-default);
  border-radius: var(--border-radius);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--tm-accent);
}

* {
  scrollbar-width: thin;
  scrollbar-color: var(--tm-border-default) var(--tm-bg-canvas);
}

/* =======================================================================
   Reduced motion: collapse any transitions/animations to near-zero.
   ======================================================================= */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* =======================================================================
   Forced colors (Windows High Contrast): restore boundaries for states
   otherwise conveyed by background color, without overriding the user's
   forced palette elsewhere.
   ======================================================================= */
@media (forced-colors: active) {
  :is(
    .ui.segment,
    .ui.segments,
    .ui.card,
    .ui.cards > .card,
    .ui.menu,
    .ui.dropdown .menu,
    details.dropdown > .content
  ) {
    border-color: CanvasText !important;
  }

  :is(input:not([type="hidden"]), textarea, select, .ui.selection.dropdown, .ui.button, .button) {
    border: 1px solid ButtonText !important;
  }

  :is(
    a[href],
    button,
    input,
    textarea,
    select,
    summary,
    [role="button"],
    [role="tab"],
    [tabindex]:not([tabindex="-1"])
  ):focus-visible {
    outline: 2px solid Highlight !important;
    box-shadow: none !important;
  }

  :is(
    .markup,
    .comment-body,
    .comment-content,
    .repo-description,
    .issue-description
  ) a[href]:not(.anchor, .button, .label, .silenced) {
    color: LinkText !important;
    text-decoration-line: underline !important;
  }

  :is(.ui.error.message, .ui.negative.message) {
    border: 3px double CanvasText !important;
  }

  :is(.ui.warning.message, .ui.yellow.message) {
    border: 2px dashed CanvasText !important;
  }

  :is(.ui.red.button, .ui.negative.button, .ui.basic.red.button, .button.danger) {
    border: 3px double ButtonText !important;
  }

  :is(.ui.orange.button, .ui.yellow.button) {
    border: 2px dashed ButtonText !important;
  }

  :is(.diff-file-box .add-code, .diff-file-box .code-diff-added) {
    border-inline-start: 3px solid CanvasText !important;
  }

  :is(.diff-file-box .del-code, .diff-file-box .code-diff-removed) {
    border-inline-start: 3px double CanvasText !important;
  }
}