/* bases — dark Forgejo theme
 * Place at $FORGEJO_CUSTOM/public/assets/css/theme-bases.css
 * Then add "bases" to the THEMES list in app.ini
 */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,wght@0,400;0,500;0,600;1,400&family=DM+Mono&display=swap');

gitea-theme-meta-info {
  --theme-display-name: "Bases";
}

:root {
  color-scheme: dark;
  --is-dark-theme: true;

  /* ── Fonts ──────────────────────────────────────────── */
  --fonts-proportional: 'DM Sans', system-ui, -apple-system, sans-serif;
  --fonts-monospace:    'DM Mono', 'Fira Code', 'Fira Mono', ui-monospace, monospace;

  /* ── Page & nav surfaces ────────────────────────────── */
  --color-body:                       #141210;
  --color-footer:                     #0e0c0a;
  --color-nav-bg:                     #141210;
  --color-nav-hover-bg:               #201e1a;
  --color-header-wrapper:             #141210;
  --color-header-wrapper-transparent: rgba(20, 18, 16, 0);
  --color-secondary-nav-bg:           #141210;

  /* ── Component surfaces ─────────────────────────────── */
  --color-secondary:               #1a1815;
  --color-secondary-bg:            #1a1815;
  --color-input-background:        #1a1815;
  --color-input-toggle-background: #1a1815;
  --color-code-bg:                 #1a1815;
  --color-box-header:              #1a1815;
  --color-box-body:                #1a1815;
  --color-box-body-highlight:      #201e1a;
  --color-menu:                    #1a1815;
  --color-card:                    #1a1815;
  --color-button:                  #201e1a;
  --color-hover:                   #201e1a;
  --color-active:                  #2c2924;
  --color-project-board-bg:        #1a1815;
  --color-editor-line-highlight:   #201e1a;
  --color-markup-code-block:       #1a1815;
  --color-markup-code-inline:      #201e1a;
  --color-markup-table-row:        rgba(255, 255, 255, 0.03);
  --color-expand-button:           #3a3630;
  --color-shadow:                  rgba(0, 0, 0, 0.50);
  --color-light:                   rgba(0, 0, 0, 0.16);
  --color-light-border:            rgba(255, 255, 255, 0.16);
  --color-overlay-backdrop:        rgba(0, 0, 0, 0.75);

  /* ── Secondary scale ────────────────────────────────── */
  --color-secondary-dark-1:  #141210;
  --color-secondary-dark-2:  #0e0d0b;
  --color-secondary-dark-3:  #080706;
  --color-secondary-light-1: #201e1a;
  --color-secondary-light-2: #2c2924;
  --color-secondary-light-3: #3a3630;

  /* ── Text ───────────────────────────────────────────── */
  --color-text:             #ede8de;
  --color-text-dark:        #ede8de;
  --color-text-light:       #857e75;
  --color-text-light-1:     #857e75;
  --color-text-light-2:     #4a4640;
  --color-text-light-3:     #4a4640;
  --color-text-focus:       #ede8de;
  --color-placeholder-text: #4a4640;
  --color-caret:            #ede8de;
  --color-timeline:         #2c2924;

  /* ── Inputs & borders ───────────────────────────────── */
  --color-border:             #2c2924;
  --color-input-text:         #ede8de;
  --color-input-border:       #2c2924;
  --color-input-border-hover: #3a3630;

  /* ── Labels ─────────────────────────────────────────── */
  --color-label-text:      #ede8de;
  --color-label-bg:        #201e1a;
  --color-label-hover-bg:  #2c2924;
  --color-label-active-bg: #3a3630;
  --color-label-bg-alt:    #2c2924;

  /* ── Tooltips ───────────────────────────────────────── */
  --color-tooltip-bg:   rgba(32, 30, 26, 0.97);
  --color-tooltip-text: #ede8de;

  /* ── Primary (teal-green accent) ────────────────────── */
  --color-primary:          #4a9f82;
  --color-primary-contrast: #141210;
  --color-primary-hover:    #57b090;
  --color-primary-active:   #3d8a6e;

  --color-primary-dark-1:  #3d8a6e;
  --color-primary-dark-2:  #347860;
  --color-primary-dark-3:  #2b6652;
  --color-primary-dark-4:  #225444;
  --color-primary-dark-5:  #1a4236;

  --color-primary-light-1: #57b090;
  --color-primary-light-2: #64bb99;
  --color-primary-light-3: #72c6a2;
  --color-primary-light-4: #7fd1ab;
  --color-primary-light-5: #8ddcb4;

  --color-primary-alpha-10: rgba(74, 159, 130, 0.10);
  --color-primary-alpha-20: rgba(74, 159, 130, 0.20);
  --color-primary-alpha-30: rgba(74, 159, 130, 0.30);
  --color-primary-alpha-50: rgba(74, 159, 130, 0.50);
  --color-primary-alpha-70: rgba(74, 159, 130, 0.70);
  --color-primary-alpha-90: rgba(74, 159, 130, 0.90);

  /* ── Accent & highlight ─────────────────────────────── */
  --color-accent:             #57b090;
  --color-small-accent:       #3d8a6e;
  --color-highlight-fg:       #4a9f82;
  --color-highlight-bg:       rgba(74, 159, 130, 0.20);
  --color-selection-bg:       #4a9f82;
  --color-selection-fg:       #141210;
  --color-reaction-bg:        rgba(255, 255, 255, 0.07);
  --color-reaction-active-bg: rgba(74, 159, 130, 0.30);
  --color-reaction-hover-bg:  rgba(74, 159, 130, 0.20);

  /* ── Named semantic colors ──────────────────────────── */
  --color-red:         #d95050;
  --color-red-dark-1:  #c03838;
  --color-red-dark-2:  #a32828;
  --color-red-light-1: #e06060;
  --color-red-light-2: #e87070;

  --color-green:         #48a068;
  --color-green-dark-1:  #3c8c58;
  --color-green-dark-2:  #307248;
  --color-green-light-1: #5ab07a;
  --color-green-light-2: #6aba88;

  --color-orange:         #e07800;
  --color-orange-dark-1:  #c56a00;
  --color-orange-dark-2:  #a85800;
  --color-orange-light-1: #f08820;
  --color-orange-light-2: #f49838;

  --color-blue:         #5a8fcc;
  --color-blue-dark-1:  #4878b0;
  --color-blue-dark-2:  #3c6498;
  --color-blue-light-1: #6ea0d8;
  --color-blue-light-2: #7eb0e0;

  --color-teal:         #4a9f82;
  --color-teal-dark-1:  #3d8a6e;
  --color-teal-dark-2:  #347860;
  --color-teal-light-1: #57b090;
  --color-teal-light-2: #64bb99;

  /* ── Status colors ──────────────────────────────────── */
  --color-error-border: #d95050;
  --color-error-bg:     #281010;
  --color-error-text:   #d95050;

  --color-success-border: #48a068;
  --color-success-bg:     #0d2418;
  --color-success-text:   #48a068;

  --color-warning-border: #e07800;
  --color-warning-bg:     #261a08;
  --color-warning-text:   #e07800;

  --color-info-border: #5a8fcc;
  --color-info-bg:     #0c1e30;
  --color-info-text:   #5a8fcc;

  /* ── Diff ────────────────────────────────────────────── */
  --color-diff-added-row-bg:       #0d2418;
  --color-diff-removed-row-bg:     #281010;
  --color-diff-moved-row-bg:       #261a08;
  --color-diff-added-word-bg:      #152520;
  --color-diff-removed-word-bg:    #3a1515;
  --color-diff-added-row-border:   #48a068;
  --color-diff-removed-row-border: #d95050;
  --color-diff-moved-row-border:   #e07800;
  --color-diff-inactive:           #4a4640;

  /* ── Badges ─────────────────────────────────────────── */
  --color-green-badge:          #48a068;
  --color-green-badge-bg:       rgba(72, 160, 104, 0.13);
  --color-green-badge-hover-bg: rgba(72, 160, 104, 0.27);

  --color-red-badge:          #d95050;
  --color-red-badge-bg:       rgba(217, 80, 80, 0.13);
  --color-red-badge-hover-bg: rgba(217, 80, 80, 0.27);

  --color-yellow-badge:          #e07800;
  --color-yellow-badge-bg:       rgba(224, 120, 0, 0.13);
  --color-yellow-badge-hover-bg: rgba(224, 120, 0, 0.27);

  --color-orange-badge:          #e07800;
  --color-orange-badge-bg:       rgba(224, 120, 0, 0.13);
  --color-orange-badge-hover-bg: rgba(224, 120, 0, 0.27);
}