/* ============================================================
   WiredInCode — Forgejo Theme (v1.0)
   Targets: Forgejo 15.x / gitea-1.22 CSS variable API
   Fonts:   self-hosted at /assets/fonts/ (copy .ttf files there)
   Deploy:  custom/public/assets/css/wiredincode.css
   ============================================================ */

/* ─── Fonts ─────────────────────────────────────────────────────── */

@font-face {
  font-family: 'Lexend';
  src: url('/assets/fonts/Lexend-VariableFont_wght.ttf') format('truetype-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Sans';
  src: url('/assets/fonts/IBMPlexSans-VariableFont_wdth_wght.ttf') format('truetype-variations');
  font-weight: 100 700;
  font-stretch: 85% 100%;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('/assets/fonts/JetBrainsMono-VariableFont_wght.ttf') format('truetype-variations');
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
}

/* ─── Color scale definitions ────────────────────────────────────── */
/* Forgejo's base CSS uses --zinc-* (light) and --steel-* (dark) as    */
/* its gray ramp. We remap them to warm stone tones so every existing  */
/* var() reference in gitea.css picks up our palette automatically.    */

:root {

  /* — Warm stone scale (replaces cold zinc in light mode) — */
  --zinc-50:  #fafaf9;
  --zinc-100: #f5f5f4;
  --zinc-150: #eeece9;
  --zinc-200: #e7e5e4;
  --zinc-250: #dedad8;
  --zinc-300: #d6d3d1;
  --zinc-350: #c4c0bc;
  --zinc-400: #a8a29e;
  --zinc-450: #918d88;
  --zinc-500: #78716c;
  --zinc-550: #6b6460;
  --zinc-600: #57534e;
  --zinc-650: #504b47;
  --zinc-700: #44403c;
  --zinc-750: #3b3835;
  --zinc-800: #292524;
  --zinc-850: #1f1d1b;
  --zinc-900: #1c1917;

  /* — Warm dark scale (replaces blue-tinted steel in dark mode) —   */
  /* 100 = lightest (text), 900 = darkest (backgrounds).              */
  /* Values anchored to Hugo dark-mode tokens where they overlap.     */
  --steel-900: #0a0a0a;   /* nav/footer bg  ← Hugo --bg-page       */
  --steel-850: #0a0a0a;   /* header wrapper                         */
  --steel-800: #111110;   /* markup code block bg                   */
  --steel-750: #0f0f0f;   /* standalone code bg ← Hugo --bg-code   */
  --steel-700: #171717;   /* card / menu bg   ← Hugo --bg-card     */
  --steel-650: #1c1c1c;   /* input bg / active                      */
  --steel-600: #262626;   /* surface / hover  ← Hugo --bg-surface  */
  --steel-550: #2d2d2c;   /* input border                           */
  --steel-500: #383836;
  --steel-450: #3d3d3b;
  --steel-400: #404040;   /* border-strong    ← Hugo --border-strong*/
  --steel-350: #525250;
  --steel-300: #636360;
  --steel-250: #878783;
  --steel-200: #a3a3a3;   /* muted text       ← Hugo --fg-muted    */
  --steel-150: #b8b8b8;
  --steel-100: #d4d4d4;   /* body text        ← Hugo --fg-2        */

  /* ── Primary (green) ── */
  --color-primary:          #639922;
  --color-primary-contrast: #eaf3de;
  --color-primary-dark-1:   #3b6d11;
  --color-primary-dark-2:   #3b6d11;
  --color-primary-dark-3:   #27500a;
  --color-primary-dark-4:   #27500a;
  --color-primary-dark-5:   #173404;
  --color-primary-dark-6:   #173404;
  --color-primary-dark-7:   #0e2002;
  --color-primary-light-1:  #97c459;
  --color-primary-light-2:  #97c459;
  --color-primary-light-3:  #c0dd97;
  --color-primary-light-4:  #c0dd97;
  --color-primary-light-5:  #d4e9b8;
  --color-primary-light-6:  #eaf3de;
  --color-primary-light-7:  #f5f9ef;
  --color-primary-alpha-10: #63992219;
  --color-primary-alpha-20: #63992233;
  --color-primary-alpha-30: #6399224d;
  --color-primary-alpha-40: #63992266;
  --color-primary-alpha-50: #63992280;
  --color-primary-alpha-60: #63992299;
  --color-primary-alpha-70: #639922b3;
  --color-primary-alpha-80: #639922cc;
  --color-primary-alpha-90: #639922e6;
  --color-primary-hover:    var(--color-primary-dark-2);
  --color-primary-active:   var(--color-primary-dark-4);

  /* ── Secondary (neutral stone) ── */
  --color-secondary:           var(--zinc-200);
  --color-secondary-dark-1:    var(--zinc-200);
  --color-secondary-dark-2:    var(--zinc-300);
  --color-secondary-dark-3:    var(--zinc-300);
  --color-secondary-dark-4:    var(--zinc-400);
  --color-secondary-dark-5:    var(--zinc-400);
  --color-secondary-dark-6:    var(--zinc-500);
  --color-secondary-dark-7:    var(--zinc-500);
  --color-secondary-dark-8:    var(--zinc-600);
  --color-secondary-dark-9:    var(--zinc-600);
  --color-secondary-dark-10:   var(--zinc-700);
  --color-secondary-dark-11:   var(--zinc-700);
  --color-secondary-dark-12:   var(--zinc-800);
  --color-secondary-dark-13:   var(--zinc-800);
  --color-secondary-light-1:   var(--zinc-200);
  --color-secondary-light-2:   var(--zinc-100);
  --color-secondary-light-3:   var(--zinc-100);
  --color-secondary-light-4:   var(--zinc-50);
  --color-secondary-alpha-10:  #e7e5e419;
  --color-secondary-alpha-20:  #e7e5e433;
  --color-secondary-alpha-30:  #e7e5e44d;
  --color-secondary-alpha-40:  #e7e5e466;
  --color-secondary-alpha-50:  #e7e5e480;
  --color-secondary-alpha-60:  #e7e5e499;
  --color-secondary-alpha-70:  #e7e5e4b3;
  --color-secondary-alpha-80:  #e7e5e4cc;
  --color-secondary-alpha-90:  #e7e5e4e6;
  --color-secondary-hover:     var(--color-secondary-dark-2);
  --color-secondary-active:    var(--color-secondary-dark-4);

  /* ── Named status colors ── */
  --color-red:     #dc2626;
  --color-orange:  #ea580c;
  --color-yellow:  #ca8a04;
  --color-olive:   #91a313;
  --color-green:   #639922;
  --color-teal:    #0d9488;
  --color-blue:    #2563eb;
  --color-violet:  #7c3aed;
  --color-purple:  #9333ea;
  --color-pink:    #db2777;
  --color-brown:   #a47252;
  --color-grey:    var(--zinc-500);
  --color-black:   #1c1917;
  --color-white:   #ffffff;
  --color-gold:    #b1983b;

  --color-red-light:     #ef4444;
  --color-orange-light:  #f97316;
  --color-yellow-light:  #eab308;
  --color-olive-light:   #839311;
  --color-green-light:   #97c459;
  --color-teal-light:    #14b8a6;
  --color-blue-light:    #3b82f6;
  --color-violet-light:  #8b5cf6;
  --color-purple-light:  #a855f7;
  --color-pink-light:    #ec4899;
  --color-brown-light:   #94674a;
  --color-grey-light:    var(--zinc-600);
  --color-black-light:   #181818;

  --color-red-dark-1:    #c82020;
  --color-red-dark-2:    #b21d1d;
  --color-orange-dark-1: #d34f0b;
  --color-orange-dark-2: #bb460a;
  --color-yellow-dark-1: #b67c04;
  --color-yellow-dark-2: #a26e03;
  --color-olive-dark-1:  #839311;
  --color-olive-dark-2:  #74820f;
  --color-green-dark-1:  #3b6d11;
  --color-green-dark-2:  #27500a;
  --color-teal-dark-1:   #0c857a;
  --color-teal-dark-2:   #0a766d;
  --color-blue-dark-1:   #1554e0;
  --color-blue-dark-2:   #124bc7;
  --color-violet-dark-1: #6a1feb;
  --color-violet-dark-2: #5c14d8;
  --color-purple-dark-1: #8519e7;
  --color-purple-dark-2: #7715cf;
  --color-pink-dark-1:   #c7216b;
  --color-pink-dark-2:   #b11d5f;
  --color-brown-dark-1:  #94674a;
  --color-brown-dark-2:  #835b42;
  --color-black-dark-1:  #000000;
  --color-black-dark-2:  #000000;

  /* ── Diff ── */
  --color-diff-added-word-bg:      #c0dd97;
  --color-diff-removed-word-bg:    #fca5a5;
  --color-diff-added-row-bg:       rgba(99, 153, 34, 0.10);
  --color-diff-removed-row-bg:     rgba(240, 153, 123, 0.10);
  --color-diff-moved-row-bg:       #fef9c3;
  --color-diff-added-row-border:   rgba(99, 153, 34, 0.35);
  --color-diff-removed-row-border: #fca5a5;
  --color-diff-moved-row-border:   #fde047;
  --color-diff-inactive:           var(--zinc-100);

  /* ── Alert states ── */
  --color-error-border:       #fecaca;
  --color-error-bg:           #fee2e2;
  --color-error-bg-active:    #fca5a5;
  --color-error-bg-hover:     #fecaca;
  --color-error-text:         #7f1d1d;
  --color-success-border:     #c0dd97;
  --color-success-bg:         #eaf3de;
  --color-success-text:       #27500a;
  --color-warning-border:     #fde047;
  --color-warning-bg:         #fef3c7;
  --color-warning-text:       #78350f;
  --color-info-border:        #c0dd97;
  --color-info-bg:            #eaf3de;
  --color-info-text:          #27500a;

  /* ── Badges ── */
  --color-red-badge:            #b91c1c;
  --color-red-badge-bg:         #b91c1c22;
  --color-red-badge-hover-bg:   #b91c1c44;
  --color-green-badge:          #639922;
  --color-green-badge-bg:       #63992222;
  --color-green-badge-hover-bg: #63992244;
  --color-yellow-badge:         #ca8a04;
  --color-yellow-badge-bg:      #ca8a0422;
  --color-yellow-badge-hover-bg:#ca8a0444;
  --color-orange-badge:         #ea580c;
  --color-orange-badge-bg:      #ea580c22;
  --color-orange-badge-hover-bg:#ea580c44;

  /* ── Page surfaces ── */
  --color-body:               #fafaf9;
  --color-box-header:         var(--zinc-100);
  --color-box-body:           var(--zinc-50);
  --color-box-body-highlight: var(--zinc-200);
  --color-card:               var(--zinc-50);
  --color-menu:               var(--zinc-100);
  --color-footer:             var(--zinc-100);
  --color-secondary-bg:       var(--zinc-100);
  --color-code-bg:            var(--zinc-50);
  --color-markup-code-block:  var(--zinc-150);
  --color-markup-code-inline: var(--zinc-200);
  --color-markup-table-row:   #ffffff06;
  --color-button:             var(--zinc-150);
  --color-hover:              #e7e5e4aa;
  --color-active:             #e7e5e4;
  --color-timeline:           var(--zinc-200);
  --color-expand-button:      var(--zinc-200);
  --color-project-board-bg:   var(--color-secondary-light-2);
  --color-project-board-dark-label: var(--zinc-550);

  /* ── Navigation ── */
  --color-nav-bg:              var(--zinc-50);   /* matches Hugo header bg-page */
  --color-nav-hover-bg:        var(--zinc-150);
  --color-secondary-nav-bg:    var(--color-body);
  --color-header-wrapper:      var(--zinc-50);
  --color-header-wrapper-transparent: #fafaf900;

  /* ── Text ── */
  --color-text-dark:      #1c1917;
  --color-text:           var(--zinc-900);
  --color-text-light:     var(--zinc-700);
  --color-text-light-1:   var(--zinc-650);
  --color-text-light-2:   var(--zinc-600);
  --color-text-light-3:   var(--zinc-550);
  --color-text-focus:     #ffffff;
  --color-placeholder-text: var(--color-text-light-3);
  --color-caret:          var(--color-text);

  /* ── Inputs ── */
  --color-input-text:              var(--zinc-800);
  --color-input-background:        #ffffff;
  --color-input-toggle-background: #ffffff;
  --color-input-border:            var(--zinc-300);
  --color-input-border-hover:      var(--zinc-400);

  /* ── UI chrome ── */
  --color-label-text:      var(--color-text);
  --color-label-bg:        #a8a29e7b;
  --color-label-hover-bg:  #a8a29ea0;
  --color-label-active-bg: #a8a29eff;
  --color-label-bg-alt:    #a8a29eff;
  --color-accent:               var(--color-primary-light-1);
  --color-small-accent:         var(--color-primary-light-5);
  --color-highlight-fg:         var(--color-primary-light-4);
  --color-highlight-bg:         var(--color-primary-light-6);
  --color-overlay-backdrop:     #1c191780;
  --color-reaction-bg:          #00000005;
  --color-reaction-active-bg:   var(--color-primary-alpha-20);
  --color-reaction-hover-bg:    var(--color-primary-alpha-30);
  --color-tooltip-text:         #ffffff;
  --color-tooltip-bg:           #1c1917f0;
  --color-shadow:               #00000060;
  --color-light:                #ffffffcc;
  --color-light-border:         #0000001d;
  --color-light-mimic-enabled:  rgba(0, 0, 0, calc(6 / 255 * 222 / 255 / var(--opacity-disabled)));
  --color-selection-bg:         #c0dd97;   /* Hugo --green-100 */
  --color-selection-fg:         #173404;   /* Hugo --green-900 */
  --color-editor-line-highlight:var(--zinc-100);
  --color-indicator-offline:    #737370;
  --color-indicator-offline-20: #73737033;
  --color-indicator-idle:       #639922;
  --color-indicator-idle-20:    #63992233;
  --color-indicator-active:     #2185d0;
  --color-indicator-active-20:  #2185d033;
  --checkerboard-color-1: #ffffff;
  --checkerboard-color-2: #e7e5e4;

  /* ── Console / ANSI ── */
  --color-console-fg:          #eeeff2;
  --color-console-fg-subtle:   #959cab;
  --color-console-bg:          #1c1917;
  --color-console-border:      #292524;
  --color-console-hover-bg:    #ffffff16;
  --color-console-active-bg:   #333231;
  --color-console-menu-bg:     #292524;
  --color-console-menu-border: #3b3835;
  --color-ansi-black:          #1c1917;
  --color-ansi-red:            #f0997b;
  --color-ansi-green:          #97c459;
  --color-ansi-yellow:         #fbbf24;
  --color-ansi-blue:           #3a8ac6;
  --color-ansi-magenta:        #d22e8b;
  --color-ansi-cyan:           #0d9488;
  --color-ansi-white:          var(--color-console-fg-subtle);
  --color-ansi-bright-black:   #44403c;
  --color-ansi-bright-red:     #f0997b;
  --color-ansi-bright-green:   #c0dd97;
  --color-ansi-bright-yellow:  #fbbf24;
  --color-ansi-bright-blue:    #4e96cc;
  --color-ansi-bright-magenta: #d74397;
  --color-ansi-bright-cyan:    #14b8a6;
  --color-ansi-bright-white:   var(--color-console-fg);

  /* ── Thin/semantic oklch labels (Forgejo 15 label system) ── */
  --thin-lightness:           60% 0.08;
  --thin-lightness-highlight: 55% 0.12;
  --regular-chroma:           0.12;
  --bg-lightness:             94% 0.04;
  --bg-chroma:                0.04;
  --color-thin-green:        oklch(var(--thin-lightness) var(--regular-chroma) 145deg);
  --color-thin-red:          oklch(var(--thin-lightness) var(--regular-chroma) 27deg);
  --color-thin-purple:       oklch(var(--thin-lightness) var(--regular-chroma) 298deg);
  --color-thin-orange:       oklch(var(--thin-lightness) var(--regular-chroma) 41deg);
  --color-thin-red-highlight:oklch(var(--thin-lightness-highlight) var(--regular-chroma) 27deg);
  --color-danger-bg:         oklch(var(--bg-lightness) var(--bg-chroma) 27deg);

  accent-color: var(--color-accent);
  color-scheme: light;
}

/* ─── Dark mode ──────────────────────────────────────────────────── */
/* JS toggle sets data-theme="dark"|"light" on <html>.               */
/* No-JS hint: tell browser to use dark chrome (scrollbars, etc.)    */
@media (prefers-color-scheme: dark) {
  html:not([data-theme]) { color-scheme: dark; }
}

html[data-theme="dark"] {
    /* Warm dark scale */
    --steel-900: #0a0a0a;
    --steel-850: #0a0a0a;
    --steel-800: #111110;
    --steel-750: #0f0f0f;
    --steel-700: #171717;
    --steel-650: #1c1c1c;
    --steel-600: #262626;
    --steel-550: #2d2d2c;
    --steel-500: #383836;
    --steel-450: #3d3d3b;
    --steel-400: #404040;
    --steel-350: #525250;
    --steel-300: #636360;
    --steel-250: #878783;
    --steel-200: #a3a3a3;
    --steel-150: #b8b8b8;
    --steel-100: #d4d4d4;

    /* ── Primary flips to lighter green on dark bg ── */
    --color-primary:          #97c459;
    --color-primary-contrast: #173404;
    --color-primary-dark-1:   #c0dd97;
    --color-primary-dark-2:   #c0dd97;
    --color-primary-dark-3:   #d4e9b8;
    --color-primary-dark-4:   #d4e9b8;
    --color-primary-dark-5:   #eaf3de;
    --color-primary-dark-6:   #eaf3de;
    --color-primary-dark-7:   #f5f9ef;
    --color-primary-light-1:  #639922;
    --color-primary-light-2:  #639922;
    --color-primary-light-3:  #3b6d11;
    --color-primary-light-4:  #27500a;
    --color-primary-light-5:  #173404;
    --color-primary-light-6:  #0e2002;
    --color-primary-light-7:  #071001;
    --color-primary-alpha-10: #97c45919;
    --color-primary-alpha-20: #97c45933;
    --color-primary-alpha-30: #97c4594d;
    --color-primary-alpha-40: #97c45966;
    --color-primary-alpha-50: #97c45980;
    --color-primary-alpha-60: #97c45999;
    --color-primary-alpha-70: #97c459b3;
    --color-primary-alpha-80: #97c459cc;
    --color-primary-alpha-90: #97c459e6;

    /* ── Secondary (dark stone grays) ── */
    --color-secondary:           var(--steel-600);
    --color-secondary-dark-1:    var(--steel-600);
    --color-secondary-dark-2:    var(--steel-500);
    --color-secondary-dark-3:    var(--steel-500);
    --color-secondary-dark-4:    var(--steel-450);
    --color-secondary-dark-5:    var(--steel-450);
    --color-secondary-dark-6:    var(--steel-400);
    --color-secondary-dark-7:    var(--steel-400);
    --color-secondary-dark-8:    var(--steel-350);
    --color-secondary-dark-9:    var(--steel-350);
    --color-secondary-dark-10:   var(--steel-300);
    --color-secondary-dark-11:   var(--steel-300);
    --color-secondary-dark-12:   var(--steel-250);
    --color-secondary-dark-13:   var(--steel-250);
    --color-secondary-light-1:   var(--steel-600);
    --color-secondary-light-2:   var(--steel-700);
    --color-secondary-light-3:   var(--steel-700);
    --color-secondary-light-4:   var(--steel-800);
    --color-secondary-alpha-10:  #26262619;
    --color-secondary-alpha-20:  #26262633;
    --color-secondary-alpha-30:  #2626264d;
    --color-secondary-alpha-40:  #26262666;
    --color-secondary-alpha-50:  #26262680;
    --color-secondary-alpha-60:  #26262699;
    --color-secondary-alpha-70:  #262626b3;
    --color-secondary-alpha-80:  #262626cc;
    --color-secondary-alpha-90:  #262626e6;

    /* ── Status ── */
    --color-green:        #97c459;
    --color-green-light:  #97c459;
    --color-green-dark-1: #c0dd97;
    --color-green-dark-2: #d4e9b8;
    --color-grey:         var(--steel-400);
    --color-black:        #0a0a0a;

    /* ── Diff ── */
    --color-diff-added-word-bg:      #639922;
    --color-diff-removed-word-bg:    #c53030;
    --color-diff-added-row-bg:       rgba(151, 196, 89, 0.10);
    --color-diff-removed-row-bg:     rgba(240, 153, 123, 0.10);
    --color-diff-added-row-border:   rgba(151, 196, 89, 0.30);
    --color-diff-removed-row-border: rgba(240, 153, 123, 0.30);
    --color-diff-inactive:           var(--steel-800);

    /* ── Alert states (dark) ── */
    --color-error-border:       #7f1d1d;
    --color-error-bg:           #2d0707;
    --color-error-bg-active:    #450a0a;
    --color-error-bg-hover:     #3d0808;
    --color-error-text:         #fca5a5;
    --color-success-border:     #3b6d11;
    --color-success-bg:         #173404;
    --color-success-text:       #c0dd97;
    --color-warning-border:     #78350f;
    --color-warning-bg:         #291b02;
    --color-warning-text:       #fde68a;
    --color-info-border:        #3b6d11;
    --color-info-bg:            #173404;
    --color-info-text:          #c0dd97;

    /* ── Badges (dark) ── */
    --color-green-badge:          #97c459;
    --color-green-badge-bg:       #97c45922;
    --color-green-badge-hover-bg: #97c45944;

    /* ── Page surfaces (dark) ── */
    --color-body:               #0a0a0a;
    --color-box-header:         var(--steel-700);
    --color-box-body:           var(--steel-750);
    --color-box-body-highlight: var(--steel-650);
    --color-card:               var(--steel-700);
    --color-menu:               var(--steel-700);
    --color-footer:             var(--steel-900);
    --color-secondary-bg:       var(--steel-700);
    --color-code-bg:            var(--steel-750);
    --color-markup-code-block:  var(--steel-800);
    --color-markup-code-inline: var(--steel-850);
    --color-button:             var(--steel-600);
    --color-hover:              var(--steel-600);
    --color-active:             var(--steel-650);
    --color-timeline:           var(--steel-600);
    --color-expand-button:      var(--steel-600);

    /* ── Navigation (dark) ── */
    --color-nav-bg:              var(--steel-900);
    --color-nav-hover-bg:        var(--steel-600);
    --color-secondary-nav-bg:    var(--color-body);
    --color-header-wrapper:      var(--steel-850);
    --color-header-wrapper-transparent: #0a0a0a00;

    /* ── Text (dark) ── */
    --color-text-dark:      #ffffff;
    --color-text:           var(--steel-100);
    --color-text-light:     var(--steel-150);
    --color-text-light-1:   var(--steel-150);
    --color-text-light-2:   var(--steel-200);
    --color-text-light-3:   var(--steel-200);

    /* ── Inputs (dark) ── */
    --color-input-text:              var(--steel-100);
    --color-input-background:        var(--steel-650);
    --color-input-toggle-background: var(--steel-650);
    --color-input-border:            var(--steel-550);
    --color-input-border-hover:      var(--steel-450);

    /* ── Labels (dark) ── */
    --color-label-text:      #ffffff;
    --color-label-bg:        var(--steel-600);
    --color-label-hover-bg:  var(--steel-550);
    --color-label-active-bg: var(--steel-500);
    --color-label-bg-alt:    var(--steel-550);

    /* ── UI chrome (dark) ── */
    --color-overlay-backdrop:     #0a0a0acc;
    --color-reaction-bg:          #ffffff0a;
    --color-tooltip-bg:           #0a0a0af0;
    --color-shadow:               #00000099;
    --color-selection-bg:         #27500a;   /* dark green, readable on dark bg */
    --color-selection-fg:         #eaf3de;
    --color-editor-line-highlight:var(--steel-700);
    --color-indicator-offline:    #737370;
    --color-indicator-idle:       #97c459;
    --color-indicator-idle-20:    #97c45933;
    --checkerboard-color-1: #262626;
    --checkerboard-color-2: #171717;

    /* Striped tables (e.g. commit list) use --color-light for even rows.
       Without this override it stays #ffffffcc from :root — near-white bg
       with light text = unreadable alternating rows in dark mode. */
    --color-light:        rgba(255,255,255,0.04);
    --color-light-border: rgba(255,255,255,0.08);

    /* ── Console (dark) ── */
    --color-console-bg:          #0f0f0e;
    --color-console-border:      #262626;
    --color-console-menu-bg:     #171717;
    --color-console-menu-border: #262626;

    /* ── Thin oklch labels (dark mode — lower lightness) ── */
    --thin-lightness:           30% 0.08;
    --thin-lightness-highlight: 35% 0.12;
    --bg-lightness:             12% 0.04;
    --color-thin-green:        oklch(var(--thin-lightness) var(--regular-chroma) 145deg);
    --color-thin-red:          oklch(var(--thin-lightness) var(--regular-chroma) 27deg);
    --color-thin-purple:       oklch(var(--thin-lightness) var(--regular-chroma) 298deg);
    --color-thin-orange:       oklch(var(--thin-lightness) var(--regular-chroma) 41deg);
    --color-thin-red-highlight:oklch(var(--thin-lightness-highlight) var(--regular-chroma) 27deg);
    --color-danger-bg:         oklch(var(--bg-lightness) var(--bg-chroma) 27deg);

    accent-color: var(--color-accent);
    color-scheme: dark;
}

/* ─── Typography ─────────────────────────────────────────────────── */

body,
.ui.menu,
.ui.form,
.ui.input,
.ui.button,
.ui.modal,
.ui.segment,
p {
  font-family: 'IBM Plex Sans', system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6,
.ui.header,
.repository.header .ui.header,
.dashboard .ui.header,
.issue.title,
.pull.title,
.milestone.title,
.release.title {
  font-family: 'Lexend', system-ui, sans-serif;
  letter-spacing: -0.01em;
  line-height: 1.25;
}

/* Match Hugo heading weights: bold for h1, semi for h2–h6 */
h1, .ui.large.header  { font-weight: 700; }
h2, h3, h4, h5, h6    { font-weight: 600; }

code, pre, kbd, samp,
.CodeMirror,
.codemirror-sizer,
.blob-code-inner,
.file-content .code-inner,
.commit-id,
.sha,
.ui.label.basic code {
  font-family: 'JetBrains Mono', ui-monospace, 'Cascadia Code', 'Menlo', monospace;
}

/* Links — Hugo uses accent-hover (#3b6d11 light / #97c459 dark) */
.markup a,
.comment-content a,
.wiki-content a {
  color: #3b6d11;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 0.18s ease, border-color 0.18s ease;
}
.markup a:hover,
.comment-content a:hover,
.wiki-content a:hover {
  color: #27500a;
  border-bottom-color: currentColor;
}
@media (prefers-color-scheme: dark) {
  .markup a,
  .comment-content a,
  .wiki-content a { color: #97c459; }
  .markup a:hover,
  .comment-content a:hover,
  .wiki-content a:hover { color: #c0dd97; }
}

/* Blockquote — matches Hugo: 4px green left border, italic, muted */
.markup blockquote,
.comment-content blockquote,
.wiki-content blockquote {
  border-left: 4px solid #639922 !important;
  border-top: none !important;
  border-right: none !important;
  border-bottom: none !important;
  padding: 8px 20px !important;
  margin: 16px 0 !important;
  color: var(--color-text-light-2) !important;
  font-style: italic;
  background: transparent !important;
}

/* Inline code — green-tinted in light mode (Hugo: accent-bg-soft) */
.markup code:not(pre code),
.comment-content code:not(pre code),
.wiki-content code:not(pre code) {
  background: #eaf3de !important;
  color: #27500a !important;
  border-radius: 4px !important;
  padding: 0.1em 0.4em !important;
  font-size: 0.88em !important;
  border: none !important;
}
html[data-theme="dark"] .markup code:not(pre code),
html[data-theme="dark"] .comment-content code:not(pre code),
html[data-theme="dark"] .wiki-content code:not(pre code) {
  background: #27500a !important;
  color: #c0dd97 !important;
}

/* ::selection — Hugo: green-100 bg / green-900 text */
::selection {
  background: #c0dd97;
  color: #173404;
}
html[data-theme="dark"] ::selection {
  background: #27500a;
  color: #eaf3de;
}

/* Tables — match Hugo: Lexend th, uppercase, muted; 0.5px row dividers */
.markup table th,
.comment-content table th {
  font-family: 'Lexend', sans-serif !important;
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  color: var(--color-text-light-2) !important;
  border-bottom: 1px solid var(--color-border) !important;
}
.markup table td,
.comment-content table td {
  border-bottom: 0.5px solid var(--color-border) !important;
  color: var(--color-text-light) !important;
}

/* ─── Buttons — radius ───────────────────────────────────────────── */
/* Forgejo's buttons vary in how they set border-radius, so we       */
/* blanket-override via the element selectors.                       */

.ui.button,
.ui.buttons .button,
.btn {
  border-radius: 8px !important;
}

/* ─── Forms & inputs ─────────────────────────────────────────────── */

.ui.input > input,
.ui.form input:not([type="radio"]):not([type="checkbox"]):not([type="range"]),
.ui.form textarea,
.ui.form select,
.ui.selection.dropdown,
.ui.search.dropdown > input.search,
.CodeMirror {
  border-radius: 8px !important;
}

.ui.input.focus > input,
.ui.input > input:focus,
.ui.form input:focus,
.ui.form textarea:focus,
.ui.form .input.focus input {
  box-shadow: 0 0 0 2px rgba(99, 153, 34, 0.30) !important;
}

/* ─── Navigation bar ─────────────────────────────────────────────── */

#navbar-logo { display: none !important; }


#navbar {
  background: var(--color-nav-bg) !important;
  border-bottom: 0.5px solid var(--color-border) !important;
}

#navbar .item,
#navbar a.item,
#navbar .item .icon {
  color: var(--color-text-light-2) !important;
}

#navbar .item:hover,
#navbar a.item:hover,
#navbar .active.item {
  color: var(--color-primary) !important;
  background: var(--color-primary-alpha-10) !important;
}

#navbar .ui.dropdown .menu {
  background: var(--color-card) !important;
  border: 0.5px solid var(--color-border) !important;
  border-radius: 8px !important;
}

#navbar .ui.dropdown .menu .item {
  color: var(--color-text) !important;
}

#navbar .ui.dropdown .menu .item:hover {
  background: var(--color-primary-alpha-10) !important;
  color: var(--color-primary) !important;
}


/* ─── Segments & panels — radius ────────────────────────────────── */

.ui.segment,
.ui.segments,
.ui.card,
.repository.file.list .non-diff-file-content,
.release-list .release-item,
.issue.list .item,
.milestone.list .milestone-card {
  border-radius: 12px !important;
}

/* ─── Labels / badges ────────────────────────────────────────────── */

.ui.label,
.labels .label,
.label.label {
  border-radius: 8px !important;
}

/* Issue state labels (Open/Closed) */
.ui.label.green,
.ui.green.label {
  background: var(--color-success-bg) !important;
  color: var(--color-success-text) !important;
  border-color: var(--color-success-border) !important;
}

/* ─── Pagination ─────────────────────────────────────────────────── */

.ui.pagination.menu .item {
  border-radius: 8px !important;
}

/* ─── Sidebar ────────────────────────────────────────────────────── */

.ui.secondary.vertical.menu .item:hover,
.ui.secondary.vertical.menu .active.item {
  border-radius: 8px !important;
}

/* ─── Code blocks — always dark ─────────────────────────────────── */
/* Forgejo renders code on both light and dark page backgrounds.     */
/* We force code blocks to always use the dark surface.              */

.markup pre,
.highlight,
.highlight pre,
.code-view,
pre code {
  background: #1c1917 !important;
  color: #d6d3d1 !important;
  border-color: #292524 !important;
  border-radius: 8px !important;
  font-size: 13.5px !important;
  line-height: 1.6 !important;
}

/* ─── Diff view ──────────────────────────────────────────────────── */

.diff-detail-box,
.diff-file-box {
  border-radius: 12px !important;
}

/* Line number gutter */
.diff-file-body .lines-num,
.diff-file-body td.lines-num {
  color: #78716c !important;
  background: #1c1917 !important;
  border-color: #292524 !important;
}

/* Code area */
.diff-file-body .lines-code,
.diff-file-body td.lines-code {
  background: #1c1917 !important;
  color: #d6d3d1 !important;
}

/* Addition */
.diff-file-body tr.added-code td,
.diff-file-body td.added {
  background: rgba(99, 153, 34, 0.12) !important;
}
.diff-file-body tr.added-code td.lines-num {
  background: rgba(99, 153, 34, 0.20) !important;
}

/* Deletion */
.diff-file-body tr.removed-code td,
.diff-file-body td.removed {
  background: rgba(240, 153, 123, 0.10) !important;
}
.diff-file-body tr.removed-code td.lines-num {
  background: rgba(240, 153, 123, 0.18) !important;
}

/* ─── Chroma syntax highlighting ─────────────────────────────────── */
/* These override the theme-embedded Chroma rules.                   */

.chroma                       { background: #1c1917; color: #d6d3d1; }
.chroma pre                   { background: #1c1917; color: #d6d3d1; }

/* Keywords */
.chroma .k, .chroma .kd, .chroma .kn,
.chroma .kp, .chroma .kr, .chroma .kc { color: #97c459; }
.chroma .kt                           { color: #97c459; font-style: italic; }
/* Functions / builtins */
.chroma .nf, .chroma .fm              { color: #c0dd97; }
.chroma .na, .chroma .nb              { color: #c0dd97; }
.chroma .nc                           { color: #c0dd97; font-weight: 500; }
.chroma .nn                           { color: #c0dd97; }
/* Tags */
.chroma .nt                           { color: #97c459; }
/* Identifiers */
.chroma .n, .chroma .nx               { color: #d6d3d1; }
.chroma .nd                           { color: #c0dd97; }
.chroma .ni                           { color: #fbbf24; }
.chroma .ne                           { color: #f0997b; }
.chroma .no                           { color: #fbbf24; }
/* Strings */
.chroma .s,  .chroma .s1, .chroma .s2,
.chroma .sb, .chroma .sc, .chroma .sd,
.chroma .se, .chroma .sh, .chroma .si,
.chroma .sx, .chroma .sr, .chroma .ss,
.chroma .sa, .chroma .dl              { color: #f0997b; }
/* Numbers */
.chroma .m,  .chroma .mb, .chroma .mf,
.chroma .mh, .chroma .mi, .chroma .il,
.chroma .mo, .chroma .mx              { color: #fbbf24; }
/* Comments */
.chroma .c,  .chroma .c1, .chroma .cm,
.chroma .cp, .chroma .cpf, .chroma .cs,
.chroma .ch                           { color: #78716c; font-style: italic; }
/* Operators */
.chroma .o, .chroma .ow               { color: #d6d3d1; }
.chroma .p, .chroma .pi               { color: #d6d3d1; }
/* Variables */
.chroma .nv, .chroma .vc, .chroma .vg,
.chroma .vi, .chroma .vm              { color: #fafaf9; }
/* Diff output */
.chroma .gd  { color: #f0997b; background: rgba(240, 153, 123, 0.12); }
.chroma .gi  { color: #97c459; background: rgba(151, 196, 89, 0.12); }
.chroma .ge  { font-style: italic; }
.chroma .gs  { font-weight: bold; }
.chroma .gu  { color: #78716c; }
.chroma .gh  { color: #a8a29e; }
.chroma .go  { color: #78716c; }
.chroma .gp  { color: #a8a29e; }
.chroma .gr,
.chroma .gt  { color: #f0997b; }
/* Other */
.chroma .err { color: #f0997b; }
.chroma .w   { color: #44403c; }
.chroma .bp  { color: #c0dd97; }
.chroma .vc  { color: #fafaf9; }

/* ─── Avatar placeholders ────────────────────────────────────────── */

.avatar[src=""],
.avatar[src*="avatar-default"],
.ui.circular.label.avatar-placeholder,
.user-avatar-empty {
  background: #eaf3de !important;
  color: #639922 !important;
}

/* ─── Flash / alert messages ─────────────────────────────────────── */

.ui.message {
  border-radius: 8px !important;
}

.ui.positive.message,
.ui.success.message {
  background: var(--color-success-bg) !important;
  color: var(--color-success-text) !important;
  border-left: 4px solid var(--color-success-border) !important;
  box-shadow: none !important;
}

.ui.info.message {
  background: var(--color-info-bg) !important;
  color: var(--color-info-text) !important;
  border-left: 4px solid var(--color-info-border) !important;
  box-shadow: none !important;
}

.ui.warning.message {
  background: var(--color-warning-bg) !important;
  color: var(--color-warning-text) !important;
  border-left: 4px solid var(--color-warning-border) !important;
  box-shadow: none !important;
}

.ui.negative.message,
.ui.error.message {
  background: var(--color-error-bg) !important;
  color: var(--color-error-text) !important;
  border-left: 4px solid var(--color-error-border) !important;
  box-shadow: none !important;
}

/* ─── Footer ─────────────────────────────────────────────────────── */
/* Default Forgejo footer hidden — replaced by #wic-footer via JS.  */

#footer,
.page-footer {
  display: none !important;
}

/* ─── WiredInCode footer ─────────────────────────────────────────── */

#wic-footer {
  background: #f5f5f4;
  border-top: 0.5px solid #e7e5e4;
  margin-top: 80px;
  padding: 40px 0 0;
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
}

html[data-theme="dark"] #wic-footer {
  background: #262626;
  border-top-color: #262626;
}

#wic-footer .wic-footer-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px 32px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 32px;
}

#wic-footer .wic-footer-brand {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

#wic-footer .wic-footer-brand a {
  font-family: 'Lexend', sans-serif;
  font-weight: 700;
  font-size: 15px;
  color: var(--color-text) !important;
  text-decoration: none !important;
  border: none !important;
}

#wic-footer .wic-footer-brand a:hover { color: var(--color-primary) !important; }

#wic-footer .wic-footer-brand a .wic-accent { color: var(--color-primary); }

#wic-footer .wic-footer-tagline {
  font-size: 13px;
  color: var(--color-text-light-2);
  margin: 0;
  font-style: italic;
}

#wic-footer .wic-footer-nav {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 24px;
  justify-content: center;
}

#wic-footer .wic-footer-nav a {
  color: var(--color-text-light-2) !important;
  font-size: 14px;
  text-decoration: none !important;
  border: none !important;
  transition: color 0.18s;
}

#wic-footer .wic-footer-nav a:hover { color: var(--color-primary) !important; }

#wic-footer .wic-footer-socials {
  display: flex;
  gap: 16px;
  justify-content: flex-end;
  color: var(--color-text-light-2);
}

#wic-footer .wic-footer-socials a {
  color: inherit !important;
  border: none !important;
  text-decoration: none !important;
  display: flex;
  align-items: center;
  transition: color 0.18s;
}

#wic-footer .wic-footer-socials a:hover { color: var(--color-primary) !important; }

#wic-footer .wic-footer-socials svg {
  width: 17px;
  height: 17px;
  fill: currentColor;
}

#wic-footer .wic-footer-copyright {
  grid-column: 1 / -1;
  border-top: 0.5px solid #e7e5e4;
  margin: 0 -24px;
  padding: 22px 24px;
  text-align: center;
  font-size: 13px;
  color: var(--color-text-light-2);
}

html[data-theme="dark"] #wic-footer .wic-footer-copyright {
  border-top-color: #404040;
}

@media (max-width: 680px) {
  #wic-footer .wic-footer-inner {
    grid-template-columns: 1fr;
    text-align: center;
  }
  #wic-footer .wic-footer-nav { justify-content: center; flex-wrap: wrap; }
  #wic-footer .wic-footer-socials { justify-content: center; }
  #wic-footer .wic-footer-brand { align-items: center; }
}

/* ─── WiredInCode page header ────────────────────────────────────── */
/* Static >_ ~/git banner below Forgejo's navbar, mirrors Hugo's .page-header */

#wic-page-header {
  border-bottom: 0.5px solid #e7e5e4;
  padding: 56px 0 32px;
  line-height: 1.7;
  background: var(--color-body);
}

html[data-theme="dark"] #wic-page-header {
  border-bottom-color: #262626;
}

.wic-page-header-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

#wic-page-header h1 {
  font-size: 32px;
  margin: 0 0 8px;
  color: #1c1917;
  font-family: 'Lexend', sans-serif;
  font-weight: 700;
  line-height: 1.25;
}

html[data-theme="dark"] #wic-page-header h1 {
  color: #fafafa;
}

#wic-page-header p,
#wic-page-header .wic-crumb {
  margin: 0;
  color: #78716c;
  font-size: 16px;
  line-height: 1.7;
}

html[data-theme="dark"] #wic-page-header p {
  color: #a3a3a3;
}

.wic-crumb {
  font-family: 'JetBrains Mono', 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 12px;
  color: #78716c;
  letter-spacing: 0.02em;
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

html[data-theme="dark"] .wic-crumb {
  color: #a3a3a3;
}

/* ─── Tabs ───────────────────────────────────────────────────────── */

.ui.tabular.menu .active.item,
.ui.secondary.pointing.menu .active.item {
  border-bottom-color: var(--color-primary) !important;
  color: var(--color-primary) !important;
}

/* ─── Links inside content ───────────────────────────────────────── */

.markup a,
.repository .file-list-item .name,
.issue-list .title a {
  color: var(--color-primary) !important;
}

.markup a:hover {
  color: var(--color-primary-dark-2) !important;
}

/* ─── WiredInCode site topbar ────────────────────────────────────── */
/* Fixed so it stays visible regardless of Forgejo's containing block structure. */

:root { --wic-topbar-h: 62.67px; } /* measured: matches Hugo's .site-header height */

#wic-topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 31;
  background: var(--color-body);
  border-bottom: 0.5px solid #e7e5e4;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* Push all page content below the fixed topbar */
body:has(#wic-topbar) {
  padding-top: var(--wic-topbar-h) !important;
}

html[data-theme="dark"] #wic-topbar {
  border-bottom-color: #262626;
}

.wic-topbar-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 15px 24px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 24px;
}

.wic-topbar-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none !important;
  flex-shrink: 0;
  border: none !important;
}

.wic-topbar-brand img {
  height: 28px;
  width: auto;
}

.wic-topbar-brand .wic-brand-text {
  font-family: 'Lexend', sans-serif;
  font-size: 17px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--color-text);
  white-space: nowrap;
}

.wic-topbar-brand .wic-accent {
  color: var(--color-primary);
}

html[data-theme="dark"] .wic-topbar-brand .wic-brand-text {
  color: #fafafa;
}

.wic-site-nav {
  display: flex;
  gap: 28px;
  margin-left: 8px;
}

.wic-site-nav a {
  font-family: 'Lexend', sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: #44403c;
  text-decoration: none !important;
  border: none !important;
  transition: color 0.18s ease;
  white-space: nowrap;
}

html[data-theme="dark"] .wic-site-nav a {
  color: #d4d4d4;
}

.wic-site-nav a:hover {
  color: var(--color-primary) !important;
  border: none !important;
}

.wic-site-nav a.active {
  color: var(--color-primary) !important;
  font-weight: 600;
}

.wic-topbar-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 12px;
  /* Pad right to match Hugo's subscribe button + gap (~111px + 12px),
     keeping the toggle at the same horizontal position across both sites. */
  padding-right: 123px;
}

/* Forgejo navbar scrolls with the page — no sticky */
body:has(#wic-topbar) #navbar {
  position: relative !important;
  top: auto !important;
}

/* Hamburger — hidden on desktop */
#wic-nav-toggle { display: none; }

/* Mobile nav */
@media (max-width: 680px) {
  .wic-topbar-inner { padding: 15px 16px; gap: 12px; }
  .wic-topbar-actions { padding-right: 0; }

  #wic-nav-toggle { display: flex; }

  .wic-site-nav {
    display: none;
    position: fixed;
    top: var(--wic-topbar-h);
    left: 0;
    right: 0;
    z-index: 30;
    flex-direction: column;
    gap: 0;
    margin-left: 0;
    background: var(--color-body);
    border-bottom: 0.5px solid #e7e5e4;
  }
  html[data-theme="dark"] .wic-site-nav {
    border-bottom-color: #262626;
  }
  .wic-site-nav.is-open { display: flex; }
  .wic-site-nav a {
    display: block !important;
    padding: 12px 24px !important;
    font-size: 15px !important;
    line-height: 1.7 !important;
    margin: 0 !important;
    height: auto !important;
    min-height: 0 !important;
  }
}

/* ─── Theme toggle button ────────────────────────────────────────── */

#wic-theme-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent !important;
  border: 0.5px solid #a8a29e !important;
  border-radius: 8px !important;
  color: var(--color-text-light-2) !important;
  cursor: pointer;
  padding: 4px 6px !important;
  margin: 0;
  transition: color 0.15s, border-color 0.15s;
  height: 32px;
  min-width: 32px;
}

#wic-theme-toggle:hover {
  color: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
  background: var(--color-primary-alpha-10) !important;
}

#wic-theme-toggle svg,
#wic-nav-toggle svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  display: block;
}

#wic-nav-toggle {
  align-items: center;
  justify-content: center;
  background: transparent !important;
  border: 0.5px solid #a8a29e !important;
  border-radius: 8px !important;
  color: var(--color-text-light-2) !important;
  cursor: pointer;
  padding: 4px 6px !important;
  margin: 0;
  transition: color 0.15s, border-color 0.15s;
  height: 32px;
  min-width: 32px;
}

#wic-nav-toggle:hover {
  color: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
  background: var(--color-primary-alpha-10) !important;
}

html[data-theme="dark"] #wic-theme-toggle {
  border-color: #404040 !important;
}

/* ─── Commit list fixes ──────────────────────────────────────────────
   Striped table rows use var(--color-light) with !important in gitea.css.
   Override with the primary alpha so even rows get a subtle green tint
   that matches the theme — works in both light and dark mode.        */

.ui.striped.table tbody tr:nth-child(2n) {
  background-color: var(--color-primary-alpha-10) !important;
}

/* SHA chips and link colours for dark mode */
html[data-theme="dark"] a.sha.label,
html[data-theme="dark"] .sha.label {
  background-color: var(--steel-600) !important;
  color: var(--steel-100) !important;
  border-color: var(--steel-500) !important;
}

html[data-theme="dark"] .commit-list a.muted,
html[data-theme="dark"] .commit-list .muted,
html[data-theme="dark"] .commit-list .author-wrapper {
  color: var(--steel-200) !important;
}

html[data-theme="dark"] .commit-list a.default-link {
  color: var(--steel-100) !important;
}

html[data-theme="dark"] .commit-list a.default-link:hover {
  color: var(--color-primary) !important;
}