/* Extend the bundled theme, retaining Forgejo's component and syntax styles. */
@import url("./theme-gitea-light.css");

:root {
  --sprout-yellow: #fde887;
  --sprout-amber: #fdc64a;
  --sprout-orange: #fd9942;
  --sprout-coral: #fd7040;
  --sprout-rose: #fc306f;
  --sprout-magenta: #f70385;
  --sprout-pink: #f20691;
  --sprout-blue: #0189e1;
  --sprout-mint: #64dcb1;

  /* Darker ocean blue keeps white button text and links readable. */
  --color-primary: #006dad;
  --color-primary-contrast: #ffffff;
  --color-primary-dark-1: #006299;
  --color-primary-dark-2: #005786;
  --color-primary-dark-3: #004b73;
  --color-primary-dark-4: #003f60;
  --color-primary-dark-5: #00304a;
  --color-primary-dark-6: #002134;
  --color-primary-dark-7: #00131e;
  --color-primary-light-1: #167bb5;
  --color-primary-light-2: #328ebe;
  --color-primary-light-3: #559fc8;
  --color-primary-light-4: #7db7d6;
  --color-primary-light-5: #add3e8;
  --color-primary-light-6: #d9ecf7;
  --color-primary-light-7: #f0f8fc;
  --color-primary-alpha-10: #006dad1a;
  --color-primary-alpha-20: #006dad33;
  --color-primary-alpha-30: #006dad4d;
  --color-primary-alpha-40: #006dad66;
  --color-primary-alpha-50: #006dad80;
  --color-primary-alpha-60: #006dad99;
  --color-primary-alpha-70: #006dadb3;
  --color-primary-alpha-80: #006dadcc;
  --color-primary-alpha-90: #006dade6;

  /* Warm surfaces and mint panels leave the code area quiet and legible. */
  --color-body: #fffdf7;
  --color-box-header: #edf9f3;
  --color-box-body: #ffffff;
  --color-box-body-highlight: #f0f8fc;
  --color-nav-bg: #fff5d0;
  --color-nav-hover-bg: var(--sprout-yellow);
  --color-secondary-nav-bg: #fffaf0;
  --color-footer: #fff5d0;
  --color-menu: #fffdf7;
  --color-card: #ffffff;
  --color-button: #fffaf0;
  --color-secondary-bg: #f0f8f4;
  --color-code-bg: #ffffff;
  --color-hover: #006dad0a;
  --color-active: #e1f3eb;
  --color-accent: var(--color-primary);
  --color-small-accent: #e1f3eb;
  --color-highlight-fg: #725300;
  --color-highlight-bg: var(--sprout-yellow);
  --color-selection-bg: var(--color-primary);
  --color-selection-fg: #ffffff;

  /* Status colors keep their meaning with related, readable palette shades. */
  --color-success-border: var(--sprout-mint);
  --color-success-bg: #edfbf5;
  --color-success-text: #17664b;
  --color-warning-border: var(--sprout-amber);
  --color-warning-bg: #fff6d8;
  --color-warning-text: #735000;
  --color-error-border: var(--sprout-rose);
  --color-error-bg: #fff0f4;
  --color-error-bg-hover: #ffe2eb;
  --color-error-bg-active: #ffd0df;
  --color-error-text: #a21b44;
  --color-info-border: var(--sprout-blue);
  --color-info-bg: #eff8ff;
  --color-info-text: #005786;
  --color-diff-added-word-bg: #b5efda;
  --color-diff-added-row-bg: #edfbf5;
  --color-diff-added-row-border: #b5efda;
  --color-diff-removed-word-bg: #ffc3d5;
  --color-diff-removed-row-bg: #fff0f4;
  --color-diff-removed-row-border: #ffc3d5;
}

/* Forgejo 16.0.3 ActivityHeatmap.vue uses these variables for days and legend.
   Low-to-high activity blends logo yellow through mint green to blue.
   Scope the scale to the grid so button and link colors stay readable. */
#user-heatmap {
  --color-secondary-alpha-60: #e8ece9;
  --color-primary-light-4: var(--sprout-yellow);
  --color-primary-light-2: #b1e29c;
  --color-primary: var(--sprout-mint);
  --color-primary-dark-2: #33b3c9;
  --color-primary-dark-4: var(--sprout-blue);
}

/* Repository activity totals use dark text over the logo's mint. */
.activity-bar-graph {
  background-color: var(--sprout-mint);
  color: #143e31;
}

/* Added and removed line summaries share the diff view's mint/rose palette. */
.diff-stats-bar {
  background-color: var(--sprout-rose);
}

.diff-stats-bar .diff-stats-add-bar {
  background-color: var(--sprout-mint);
}

.repository .diff-detail-box .diff-detail-stats strong:nth-of-type(1) {
  color: #735000;
}

.repository .diff-detail-box .diff-detail-stats strong:nth-of-type(2) {
  color: #17664b;
}

.repository .diff-detail-box .diff-detail-stats strong:nth-of-type(3) {
  color: #a21b44;
}

#navbar {
  border-bottom: 3px solid var(--sprout-coral);
}

.page-footer {
  border-top: 3px solid var(--sprout-mint);
}