/* ============================================================================
   Podesta — Forgejo theme · auto (follows system color scheme)
   ----------------------------------------------------------------------------
   Light by default; switches to the ink-700 dark surface when the OS reports
   `prefers-color-scheme: dark`. Mirror values from theme-podesta-light.css
   and theme-podesta-dark.css; if you change anchored tokens there, mirror
   them here.
   ============================================================================ */

@import url("https://fonts.googleapis.com/css2?family=Source+Serif+4:ital,opsz,wght@0,8..60,400;0,8..60,500;0,8..60,600;0,8..60,700;1,8..60,400&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap");

/* ============================================================================
   Shared primitives + radii + typography
   ============================================================================ */

:root {
  --stone-50:    #FAF9F5;
  --stone-100:   #F1F0EC;
  --stone-150:   #ECEAE3;
  --stone-200:   #E8E6E0;
  --stone-300:   #D5D2C9;
  --stone-400:   #B6B2A6;
  --stone-500:   #8C887D;
  --stone-600:   #5F5C53;
  --stone-700:   #3F3D37;
  --stone-800:   #2A2925;
  --stone-900:   #161513;

  --ink-50:      #E5E8EE;
  --ink-100:     #C4CAD5;
  --ink-200:     #95A0B3;
  --ink-300:     #5F6E89;
  --ink-400:     #36465F;
  --ink-500:     #1A2540;
  --ink-600:     #141C32;
  --ink-700:     #0F1521;
  --ink-800:     #0A0E18;
  --ink-900:     #06080F;

  --oxblood-300: #B66572;
  --oxblood-400: #8C3A48;
  --oxblood-500: #6B2330;
  --oxblood-600: #561A26;
  --oxblood-700: #3F121C;

  --fonts-proportional: "Inter", "Söhne", -apple-system, "Segoe UI", system-ui, "Noto Sans", "Helvetica Neue", Arial;
  --fonts-monospace:    "JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace, var(--fonts-emoji);

  --border-radius:        12px;
  --border-radius-medium: 20px;
  --border-radius-large:  28px;
}

/* ============================================================================
   Light surface (default)
   ============================================================================ */

:root {
  --zinc-50:  var(--stone-50);
  --zinc-100: var(--stone-100);
  --zinc-150: var(--stone-150);
  --zinc-200: var(--stone-200);
  --zinc-250: #DCD9D0;
  --zinc-300: var(--stone-300);
  --zinc-350: #C2BEB2;
  --zinc-400: var(--stone-400);
  --zinc-450: #A09C90;
  --zinc-500: var(--stone-500);
  --zinc-550: #76736A;
  --zinc-600: var(--stone-600);
  --zinc-650: #4F4D45;
  --zinc-700: var(--stone-700);
  --zinc-750: #353330;
  --zinc-800: var(--stone-800);
  --zinc-850: #1F1E1B;
  --zinc-900: var(--stone-900);

  --color-primary:           var(--ink-500);
  --color-primary-contrast:  var(--stone-100);
  --color-primary-dark-1:    var(--ink-500);
  --color-primary-dark-2:    var(--ink-600);
  --color-primary-dark-3:    var(--ink-600);
  --color-primary-dark-4:    var(--ink-700);
  --color-primary-dark-5:    var(--ink-700);
  --color-primary-dark-6:    var(--ink-800);
  --color-primary-dark-7:    var(--ink-800);
  --color-primary-light-1:   var(--ink-400);
  --color-primary-light-2:   var(--ink-300);
  --color-primary-light-3:   var(--ink-200);
  --color-primary-light-4:   var(--ink-100);
  --color-primary-light-5:   #D7DCE6;
  --color-primary-light-6:   var(--ink-50);
  --color-primary-light-7:   #F0F2F6;
  --color-primary-alpha-10:  rgba(26, 37, 64, 0.10);
  --color-primary-alpha-20:  rgba(26, 37, 64, 0.20);
  --color-primary-alpha-30:  rgba(26, 37, 64, 0.30);
  --color-primary-alpha-40:  rgba(26, 37, 64, 0.40);
  --color-primary-alpha-50:  rgba(26, 37, 64, 0.50);
  --color-primary-alpha-60:  rgba(26, 37, 64, 0.60);
  --color-primary-alpha-70:  rgba(26, 37, 64, 0.70);
  --color-primary-alpha-80:  rgba(26, 37, 64, 0.80);
  --color-primary-alpha-90:  rgba(26, 37, 64, 0.90);
  --color-primary-hover:     var(--color-primary-dark-2);
  --color-primary-active:    var(--color-primary-dark-4);

  --color-body:               var(--stone-100);
  --color-box-header:         var(--stone-50);
  --color-box-body:           var(--stone-50);
  --color-box-body-highlight: var(--stone-150);
  --color-card:               var(--stone-50);
  --fancy-card-bg:            var(--stone-150);
  --fancy-card-border:        var(--stone-200);
  --color-menu:               var(--stone-150);
  --color-footer:             var(--stone-150);
  --color-timeline:           var(--stone-300);
  --color-secondary-bg:       var(--stone-150);
  --color-secondary-nav-bg:   var(--color-body);
  --color-nav-bg:             var(--stone-150);
  --color-nav-hover-bg:       var(--stone-200);
  --color-header-wrapper:             var(--stone-50);
  --color-header-wrapper-transparent: rgba(241, 240, 236, 0);

  --color-text-dark:    var(--ink-900);
  --color-text:         var(--ink-500);
  --color-text-light:   var(--stone-700);
  --color-text-light-1: #4F4D45;
  --color-text-light-2: var(--stone-600);
  --color-text-light-3: var(--ink-300);
  --color-text-focus:   var(--stone-100);
  --color-placeholder-text: var(--ink-300);
  --color-caret:        var(--ink-500);

  --color-input-text:              var(--ink-500);
  --color-input-background:        var(--stone-50);
  --color-input-toggle-background: var(--stone-50);
  --color-input-border:            var(--stone-300);
  --color-input-border-hover:      var(--stone-500);
  --color-button:                  var(--stone-200);
  --color-code-bg:                 var(--stone-150);
  --color-markup-code-block:       var(--stone-150);
  --color-markup-code-inline:      var(--stone-200);
  --color-markup-table-row:        rgba(26, 28, 50, 0.025);
  --color-editor-line-highlight:   var(--stone-150);
  --color-expand-button:           var(--stone-200);

  --color-light:               rgba(250, 249, 245, 0.85);
  --color-light-mimic-enabled: rgba(26, 37, 64, calc(6 / 255 * 222 / 255 / var(--opacity-disabled)));
  --color-light-border:        rgba(26, 37, 64, 0.10);
  --color-hover:               rgba(213, 210, 201, 0.92);
  --color-active:              var(--stone-300);
  --color-shadow:              rgba(22, 28, 50, 0.40);

  --color-accent:        var(--oxblood-500);
  --color-small-accent:  var(--oxblood-300);
  --color-highlight-fg:  var(--oxblood-500);
  --color-highlight-bg:  #F2DCDF;

  --color-label-text:     var(--ink-500);
  --color-label-bg:       rgba(95, 92, 83, 0.18);
  --color-label-hover-bg: rgba(95, 92, 83, 0.28);
  --color-label-active-bg:rgba(95, 92, 83, 0.42);
  --color-label-bg-alt:   rgba(95, 92, 83, 0.42);
  --color-reaction-bg:        rgba(26, 37, 64, 0.04);
  --color-reaction-active-bg: var(--color-primary-alpha-20);
  --color-reaction-hover-bg:  var(--color-primary-alpha-30);

  --color-tooltip-text:     var(--stone-100);
  --color-tooltip-bg:       rgba(15, 21, 33, 0.95);
  --color-overlay-backdrop: rgba(15, 21, 33, 0.78);
  --color-selection-bg:     var(--ink-500);
  --color-selection-fg:     var(--stone-100);

  --color-project-board-bg:         var(--stone-150);
  --color-project-board-dark-label: var(--stone-500);

  --color-indicator-offline:    var(--stone-500);
  --color-indicator-offline-20: rgba(140, 136, 125, 0.22);
  --color-indicator-idle:       #2F6F4E;
  --color-indicator-idle-20:    rgba(47, 111, 78, 0.22);
  --color-indicator-active:     #2B4F8F;
  --color-indicator-active-20:  rgba(43, 79, 143, 0.22);

  --color-red:         #9C2A2A;
  --color-red-light:   #B23434;
  --color-red-dark-1:  #862424;
  --color-red-dark-2:  #6E1E1E;
  --color-orange:      #B45D1E;
  --color-orange-light:#D26F22;
  --color-orange-dark-1:#9C5019;
  --color-orange-dark-2:#834115;
  --color-yellow:      #7A5A18;
  --color-yellow-light:#9A7320;
  --color-yellow-dark-1:#684C14;
  --color-yellow-dark-2:#574010;
  --color-olive:       #5F6F1C;
  --color-olive-light: #6F8120;
  --color-olive-dark-1:#525F18;
  --color-olive-dark-2:#444F14;
  --color-green:       #2F6F4E;
  --color-green-light: #3A8862;
  --color-green-dark-1:#266042;
  --color-green-dark-2:#1F5037;
  --color-teal:        #1F6E68;
  --color-teal-light:  #248580;
  --color-teal-dark-1: #1A5F5A;
  --color-teal-dark-2: #14504C;
  --color-blue:        #2B4F8F;
  --color-blue-light:  #335FAA;
  --color-blue-dark-1: #25447A;
  --color-blue-dark-2: #1F3964;
  --color-violet:      #5B3CA8;
  --color-violet-light:#6E4DBE;
  --color-violet-dark-1:#4D338F;
  --color-violet-dark-2:#3F2B77;
  --color-purple:      #6B348C;
  --color-purple-light:#7E3FA4;
  --color-purple-dark-1:#5A2C77;
  --color-purple-dark-2:#492463;
  --color-pink:        #A2356A;
  --color-pink-light:  #B83C78;
  --color-pink-dark-1: #8A2C5A;
  --color-pink-dark-2: #72244A;
  --color-brown:       #7A5A3D;
  --color-brown-light: #8C6B4B;
  --color-brown-dark-1:#664A33;
  --color-brown-dark-2:#52382A;
  --color-grey:        var(--ink-300);
  --color-grey-light:  var(--ink-200);
  --color-black:       var(--ink-900);
  --color-black-light: var(--ink-800);
  --color-black-dark-1:var(--ink-900);
  --color-black-dark-2:var(--ink-900);
  --color-gold:        #A38427;
  --color-white:       var(--stone-50);

  --color-red-badge:           #9C2A2A;
  --color-red-badge-bg:        rgba(156, 42, 42, 0.14);
  --color-red-badge-hover-bg:  rgba(156, 42, 42, 0.28);
  --color-green-badge:         #2F6F4E;
  --color-green-badge-bg:      rgba(47, 111, 78, 0.14);
  --color-green-badge-hover-bg:rgba(47, 111, 78, 0.28);
  --color-yellow-badge:        #7A5A18;
  --color-yellow-badge-bg:     rgba(122, 90, 24, 0.14);
  --color-yellow-badge-hover-bg:rgba(122, 90, 24, 0.28);
  --color-orange-badge:        #B45D1E;
  --color-orange-badge-bg:     rgba(180, 93, 30, 0.14);
  --color-orange-badge-hover-bg:rgba(180, 93, 30, 0.28);

  --color-error-border:    rgba(156, 42, 42, 0.30);
  --color-error-bg:        rgba(156, 42, 42, 0.08);
  --color-error-bg-hover:  rgba(156, 42, 42, 0.16);
  --color-error-bg-active: rgba(156, 42, 42, 0.24);
  --color-error-text:      #6E1E1E;
  --color-success-border:  rgba(47, 111, 78, 0.30);
  --color-success-bg:      rgba(47, 111, 78, 0.10);
  --color-success-text:    #1F5037;
  --color-warning-border:  rgba(122, 90, 24, 0.30);
  --color-warning-bg:      rgba(122, 90, 24, 0.10);
  --color-warning-text:    #574010;
  --color-info-border:     rgba(43, 79, 143, 0.30);
  --color-info-bg:         rgba(43, 79, 143, 0.08);
  --color-info-text:       #1F3964;

  --color-diff-added-row-bg:     #DDEEDD;
  --color-diff-added-row-border: #B5D2B0;
  --color-diff-added-word-bg:    #B5D2B0;
  --color-diff-removed-row-bg:   #F2DCDF;
  --color-diff-removed-row-border:#D9B7BD;
  --color-diff-removed-word-bg:  #D9B7BD;
  --color-diff-moved-row-bg:     #F0E8D2;
  --color-diff-moved-row-border: #D5C99A;
  --color-diff-inactive:         var(--stone-150);

  --color-console-fg:        #E8E6E0;
  --color-console-fg-subtle: #95938A;
  --color-console-bg:        var(--ink-700);
  --color-console-border:    var(--ink-500);
  --color-console-hover-bg:  rgba(241, 240, 236, 0.08);
  --color-console-active-bg: var(--ink-500);
  --color-console-menu-bg:   var(--ink-600);
  --color-console-menu-border:var(--ink-400);

  --color-ansi-black:          #1F2326;
  --color-ansi-red:            #B66572;
  --color-ansi-green:          #87AB78;
  --color-ansi-yellow:         #CC9F3A;
  --color-ansi-blue:           #6B8FBE;
  --color-ansi-magenta:        #C0729E;
  --color-ansi-cyan:           #5FA6A0;
  --color-ansi-white:          var(--color-console-fg-subtle);
  --color-ansi-bright-black:   #46494D;
  --color-ansi-bright-red:     #D17888;
  --color-ansi-bright-green:   #95B98A;
  --color-ansi-bright-yellow:  #E0B14F;
  --color-ansi-bright-blue:    #8AA9D2;
  --color-ansi-bright-magenta: #D182AC;
  --color-ansi-bright-cyan:    #74B5AF;
  --color-ansi-bright-white:   var(--color-console-fg);

  --checkerboard-color-1: var(--stone-50);
  --checkerboard-color-2: var(--stone-200);

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

/* ============================================================================
   Dark surface
   ============================================================================ */

@media (prefers-color-scheme: dark) {
  :root {
    /* Surface ramp — pure neutral greys (NO blue tint), zinc-derived */
    --steel-100: #f4f4f5;
    --steel-150: #ececee;
    --steel-200: #e4e4e7;
    --steel-250: #d4d4d8;
    --steel-300: #babac1;
    --steel-350: #a1a1aa;
    --steel-400: #898992;
    --steel-450: #71717a;
    --steel-500: #61616a;
    --steel-550: #52525b;
    --steel-600: #3f3f46;
    --steel-650: #333338;
    --steel-700: #27272a;
    --steel-750: #1f1f23;
    --steel-800: #18181b;
    --steel-850: #131316;
    --steel-900: #0f0f11;

    --zinc-50:   var(--steel-900);
    --zinc-100:  var(--steel-850);
    --zinc-150:  var(--steel-800);
    --zinc-200:  var(--steel-750);
    --zinc-250:  var(--steel-700);
    --zinc-300:  var(--steel-650);
    --zinc-350:  var(--steel-600);
    --zinc-400:  var(--steel-550);
    --zinc-450:  var(--steel-500);
    --zinc-500:  var(--steel-450);
    --zinc-550:  var(--steel-400);
    --zinc-600:  var(--steel-350);
    --zinc-650:  var(--steel-300);
    --zinc-700:  var(--steel-250);
    --zinc-750:  var(--steel-200);
    --zinc-800:  var(--steel-150);
    --zinc-850:  var(--steel-100);
    --zinc-900:  var(--stone-100);

    --color-primary:           var(--ink-100);
    --color-primary-contrast:  var(--steel-900);
    --color-primary-dark-1:    #B0B7C4;
    --color-primary-dark-2:    var(--ink-200);
    --color-primary-dark-3:    var(--ink-200);
    --color-primary-dark-4:    var(--ink-300);
    --color-primary-dark-5:    var(--ink-300);
    --color-primary-dark-6:    var(--ink-400);
    --color-primary-dark-7:    var(--ink-400);
    --color-primary-light-1:   #D5DAE2;
    --color-primary-light-2:   #DCE0E7;
    --color-primary-light-3:   #E2E5EB;
    --color-primary-light-4:   var(--ink-50);
    --color-primary-light-5:   #EAEDF0;
    --color-primary-light-6:   #F0F2F5;
    --color-primary-light-7:   #F5F6F8;
    --color-primary-alpha-10:  rgba(196, 202, 213, 0.10);
    --color-primary-alpha-20:  rgba(196, 202, 213, 0.20);
    --color-primary-alpha-30:  rgba(196, 202, 213, 0.30);
    --color-primary-alpha-40:  rgba(196, 202, 213, 0.40);
    --color-primary-alpha-50:  rgba(196, 202, 213, 0.50);
    --color-primary-alpha-60:  rgba(196, 202, 213, 0.60);
    --color-primary-alpha-70:  rgba(196, 202, 213, 0.70);
    --color-primary-alpha-80:  rgba(196, 202, 213, 0.80);
    --color-primary-alpha-90:  rgba(196, 202, 213, 0.90);
    --color-primary-hover:     #D5DAE2;
    --color-primary-active:    #E2E5EB;

    --color-body:               var(--steel-800);
    --color-box-body:           var(--steel-750);
    --color-box-header:         var(--steel-750);
    --color-box-body-highlight: var(--steel-650);
    --color-card:               var(--steel-700);
    --fancy-card-bg:            var(--steel-700);
    --fancy-card-border:        rgba(255, 255, 255, 0.04);
    --color-menu:               var(--steel-700);
    --color-footer:             var(--steel-800);
    --color-timeline:           var(--steel-650);
    --color-secondary-bg:       var(--steel-700);
    --color-secondary:          var(--steel-700);
    --color-secondary-nav-bg:   var(--color-body);
    --color-nav-bg:             var(--steel-750);
    --color-nav-hover-bg:       var(--steel-600);
    --color-header-wrapper:             var(--steel-750);
    --color-header-wrapper-transparent: rgba(31, 31, 35, 0);

    --color-text-dark:    #FFFFFF;
    --color-text:         var(--stone-100);
    --color-text-light:   var(--ink-100);
    --color-text-light-1: var(--ink-100);
    --color-text-light-2: var(--ink-200);
    --color-text-light-3: var(--ink-300);
    --color-text-focus:   #FFFFFF;
    --color-placeholder-text: var(--ink-300);
    --color-caret:        var(--stone-100);

    --color-input-text:              var(--stone-100);
    --color-input-background:        var(--steel-650);
    --color-input-toggle-background: var(--steel-650);
    --color-input-border:            var(--steel-600);
    --color-input-border-hover:      var(--steel-500);
    --color-button:                  var(--steel-600);
    --color-code-bg:                 var(--steel-750);
    --color-markup-code-block:       var(--steel-800);
    --color-markup-code-inline:      var(--steel-850);
    --color-markup-table-row:        rgba(255, 255, 255, 0.03);
    --color-editor-line-highlight:   var(--steel-700);
    --color-expand-button:           #3c404d;

    --color-light:               #00000028;
    --color-light-mimic-enabled: rgba(0, 0, 0, calc(40 / 255 * 222 / 255 / var(--opacity-disabled)));
    --color-light-border:        rgba(255, 255, 255, 0.10);
    --color-hover:               var(--steel-600);
    --color-active:              var(--steel-650);
    --color-shadow:              #00000060;

    --color-accent:        var(--oxblood-300);
    --color-small-accent:  var(--oxblood-400);
    --color-highlight-fg:  var(--oxblood-300);
    --color-highlight-bg:  rgba(182, 101, 114, 0.18);

    --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);
    --color-reaction-bg:        rgba(255, 255, 255, 0.06);
    --color-reaction-active-bg: var(--color-primary-alpha-30);
    --color-reaction-hover-bg:  var(--color-primary-alpha-40);

    --color-tooltip-text:     #FFFFFF;
    --color-tooltip-bg:       #000000F0;
    --color-overlay-backdrop: #080808C0;
    --color-selection-bg:     var(--ink-100);
    --color-selection-fg:     var(--steel-900);

    --color-project-board-bg:         var(--steel-700);
    --color-project-board-dark-label: var(--steel-300);

    --color-indicator-offline:    #52525B;
    --color-indicator-offline-20: #52525B33;
    --color-indicator-idle:       #16A34A;
    --color-indicator-idle-20:    #16A34A33;
    --color-indicator-active:     #2185D0;
    --color-indicator-active-20:  #2185D033;

    --color-red:         #B91C1C;
    --color-red-light:   #DC2626;
    --color-red-dark-1:  #C82020;
    --color-red-dark-2:  #B21D1D;
    --color-orange:      #EA580C;
    --color-orange-light:#F97316;
    --color-orange-dark-1:#D34F0B;
    --color-orange-dark-2:#BB460A;
    --color-yellow:      #CA8A04;
    --color-yellow-light:#EAB308;
    --color-yellow-dark-1:#B67C04;
    --color-yellow-dark-2:#A26E03;
    --color-olive:       #91A313;
    --color-olive-light: #839311;
    --color-olive-dark-1:#839311;
    --color-olive-dark-2:#74820F;
    --color-green:       #15803D;
    --color-green-light: #16A34A;
    --color-green-dark-1:#137337;
    --color-green-dark-2:#116631;
    --color-teal:        #0D9488;
    --color-teal-light:  #14B8A6;
    --color-teal-dark-1: #0C857A;
    --color-teal-dark-2: #0A766D;
    --color-blue:        #2563EB;
    --color-blue-light:  #3B82F6;
    --color-blue-dark-1: #1554E0;
    --color-blue-dark-2: #124BC7;
    --color-violet:      #7C3AED;
    --color-violet-light:#8B5CF6;
    --color-violet-dark-1:#6A1FEB;
    --color-violet-dark-2:#5C14D8;
    --color-purple:      #9333EA;
    --color-purple-light:#A855F7;
    --color-purple-dark-1:#8519E7;
    --color-purple-dark-2:#7715CF;
    --color-pink:        #DB2777;
    --color-pink-light:  #EC4899;
    --color-pink-dark-1: #C7216B;
    --color-pink-dark-2: #B11D5F;
    --color-brown:       #A47252;
    --color-brown-light: #94674A;
    --color-brown-dark-1:#94674A;
    --color-brown-dark-2:#835B42;
    --color-grey:        var(--ink-200);
    --color-grey-light:  var(--ink-100);
    --color-black:       #111827;
    --color-black-light: #1F2937;
    --color-black-dark-1:#000000;
    --color-black-dark-2:#000000;
    --color-gold:        #B1983B;
    --color-white:       #FFFFFF;

    --color-red-badge:           #B91C1C;
    --color-red-badge-bg:        #B91C1C22;
    --color-red-badge-hover-bg:  #B91C1C44;
    --color-green-badge:         #16A34A;
    --color-green-badge-bg:      #16A34A22;
    --color-green-badge-hover-bg:#16A34A44;
    --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;

    --color-error-border:    #783030;
    --color-error-bg:        #5F2525;
    --color-error-bg-hover:  #783030;
    --color-error-bg-active: #783030;
    --color-error-text:      #FEF2F2;
    --color-success-border:  #1F6E3C;
    --color-success-bg:      #1D462C;
    --color-success-text:    #AEF0C2;
    --color-warning-border:  #A67A1D;
    --color-warning-bg:      #644821;
    --color-warning-text:    #FFF388;
    --color-info-border:     #345380;
    --color-info-bg:         #0C2B4F;
    --color-info-text:       #BFDBFE;

    --color-diff-added-row-bg:     #1B3625;
    --color-diff-added-row-border: #255C39;
    --color-diff-added-word-bg:    #255C39;
    --color-diff-removed-row-bg:   #432121;
    --color-diff-removed-row-border:#783030;
    --color-diff-removed-word-bg:  #783030;
    --color-diff-moved-row-bg:     #825718;
    --color-diff-moved-row-border: #A67A1D;
    --color-diff-inactive:         var(--steel-650);

    --color-console-fg:        #EEEFF2;
    --color-console-fg-subtle: #959CAB;
    --color-console-bg:        #1F212B;
    --color-console-border:    #383C47;
    --color-console-hover-bg:  #FFFFFF16;
    --color-console-active-bg: #454A57;
    --color-console-menu-bg:   #383C47;
    --color-console-menu-border:#5C6374;

    --color-ansi-black:          #1D2328;
    --color-ansi-red:            #CC4848;
    --color-ansi-green:          #87AB63;
    --color-ansi-yellow:         #CC9903;
    --color-ansi-blue:           #3A8AC6;
    --color-ansi-magenta:        #D22E8B;
    --color-ansi-cyan:           #00918A;
    --color-ansi-white:          var(--color-console-fg-subtle);
    --color-ansi-bright-black:   #424851;
    --color-ansi-bright-red:     #D15A5A;
    --color-ansi-bright-green:   #93B373;
    --color-ansi-bright-yellow:  #EAAF03;
    --color-ansi-bright-blue:    #4E96CC;
    --color-ansi-bright-magenta: #D74397;
    --color-ansi-bright-cyan:    #00B6AD;
    --color-ansi-bright-white:   var(--color-console-fg);

    --checkerboard-color-1: var(--steel-700);
    --checkerboard-color-2: var(--steel-800);

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


/* ============================================================================
   Editorial type
   ============================================================================ */

.markup h1, .markup h2, .markup h3,
.repository .header-wrapper > .repo-header .ui.header,
.user.profile .ui.card .header,
.dashboard.feeds .filter-list h4 {
  font-family: "Source Serif 4", "Tiempos Headline", "Iowan Old Style", Georgia, serif;
  letter-spacing: -0.01em;
  font-weight: 600;
}
.markup h1 { font-weight: 600; letter-spacing: -0.02em; line-height: 1.12; }
.markup h2 { font-weight: 500; letter-spacing: -0.015em; line-height: 1.18; }
.markup h3 { font-weight: 600; letter-spacing: -0.01em; line-height: 1.22; }

code, pre, kbd, samp, tt,
.lines-num, .lines-code,
.commit-id, .sha,
.markup code, .markup pre {
  font-family: var(--fonts-monospace);
  font-feature-settings: "ss01", "cv11";
}

/* ============================================================================
   Float surfaces — light uses soft drop, dark uses inset hairline
   ============================================================================ */

.ui.segment,
.ui.attached.segment,
.ui.segments,
.ui.card,
.ui.cards > .card,
.repository .ui.repo-button-row,
.repository.file.list .non-diff-file-content,
.repository .commit-list .commit,
.dashboard.feeds .news .ui.segment,
.user.profile .ui.card,
.organization.profile .ui.card,
.code-view {
  border-radius: var(--border-radius-medium);
  border-color: transparent;
}

.ui.segment:not(.no-shadow):not(.basic):not(.attached),
.ui.segments:not(.no-shadow),
.ui.card,
.ui.cards > .card,
.fancy-card {
  box-shadow:
    0 1px 2px 0 rgba(22, 28, 50, 0.04),
    0 8px 20px -8px rgba(22, 28, 50, 0.10);
}
@media (prefers-color-scheme: dark) {
  .ui.segment:not(.no-shadow):not(.basic):not(.attached),
  .ui.segments:not(.no-shadow),
  .ui.card,
  .ui.cards > .card,
  .fancy-card {
    box-shadow: inset 0 0 0 1px rgba(196, 202, 213, 0.06);
    background: var(--color-card);
  }
}

/* ============================================================================
   Page chrome
   ============================================================================ */

#navbar,
.full.height > .ui.menu.navigation,
header.full.height,
.page-content > .ui.menu {
  background: var(--color-header-wrapper);
  border-bottom: 0;
  box-shadow: 0 1px 0 0 rgba(22, 28, 50, 0.06);
}
@media (prefers-color-scheme: dark) {
  #navbar,
  .full.height > .ui.menu.navigation,
  header.full.height,
  .page-content > .ui.menu {
    box-shadow: inset 0 -1px 0 0 rgba(196, 202, 213, 0.06);
  }
}

.repository.file.list #repo-files-table tr,
.ui.table > tbody > tr,
.ui.table > tr {
  border-color: rgba(26, 37, 64, 0.06);
}
@media (prefers-color-scheme: dark) {
  .repository.file.list #repo-files-table tr,
  .ui.table > tbody > tr,
  .ui.table > tr {
    border-color: rgba(196, 202, 213, 0.06);
  }
}

/* ============================================================================
   Login / register / settings — render as ONE rounded card
   ============================================================================ */

.user.signin,
.user.signup,
.user.activate,
.user.forgot.password,
.user.reset.password {
  background: var(--color-body);
}
.user.signin .ui.container.fluid,
.user.signup .ui.container.fluid,
.user.activate .ui.container.fluid,
.user.forgot.password .ui.container.fluid,
.user.reset.password .ui.container.fluid {
  border-radius: var(--border-radius-medium);
  overflow: hidden;
  box-shadow:
    0 1px 2px 0 rgba(22, 28, 50, 0.04),
    0 8px 20px -8px rgba(22, 28, 50, 0.10);
}
@media (prefers-color-scheme: dark) {
  .user.signin .ui.container.fluid,
  .user.signup .ui.container.fluid,
  .user.activate .ui.container.fluid,
  .user.forgot.password .ui.container.fluid,
  .user.reset.password .ui.container.fluid {
    box-shadow: inset 0 0 0 1px rgba(196, 202, 213, 0.08);
  }
}
.user.signin .ui.attached.header,
.user.signup .ui.attached.header,
.user.activate .ui.attached.header,
.user.forgot.password .ui.attached.header,
.user.reset.password .ui.attached.header,
.user.signin .ui.attached.segment,
.user.signup .ui.attached.segment,
.user.activate .ui.attached.segment,
.user.forgot.password .ui.attached.segment,
.user.reset.password .ui.attached.segment {
  background: var(--color-box-body);
  border: 0;
  border-radius: 0;
}
.user.signin a:not(.button):not(.item):not(.ui.button),
.user.signup a:not(.button):not(.item):not(.ui.button),
.user.activate a:not(.button):not(.item):not(.ui.button),
.user.forgot.password a:not(.button):not(.item):not(.ui.button),
.user.reset.password a:not(.button):not(.item):not(.ui.button) {
  color: var(--ink-500);
  text-decoration: underline;
  text-decoration-color: var(--oxblood-500);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.user.signin a:not(.button):not(.item):not(.ui.button):hover,
.user.signup a:not(.button):not(.item):not(.ui.button):hover,
.user.activate a:not(.button):not(.item):not(.ui.button):hover,
.user.forgot.password a:not(.button):not(.item):not(.ui.button):hover,
.user.reset.password a:not(.button):not(.item):not(.ui.button):hover {
  color: var(--oxblood-500);
  opacity: 1;
}
@media (prefers-color-scheme: dark) {
  .user.signin a:not(.button):not(.item):not(.ui.button),
  .user.signup a:not(.button):not(.item):not(.ui.button),
  .user.activate a:not(.button):not(.item):not(.ui.button),
  .user.forgot.password a:not(.button):not(.item):not(.ui.button),
  .user.reset.password a:not(.button):not(.item):not(.ui.button) {
    color: var(--stone-100);
    text-decoration-color: var(--oxblood-300);
  }
  .user.signin a:not(.button):not(.item):not(.ui.button):hover,
  .user.signup a:not(.button):not(.item):not(.ui.button):hover,
  .user.activate a:not(.button):not(.item):not(.ui.button):hover,
  .user.forgot.password a:not(.button):not(.item):not(.ui.button):hover,
  .user.reset.password a:not(.button):not(.item):not(.ui.button):hover {
    color: var(--oxblood-300);
  }
}

/* ============================================================================
   Overlays — flatten Fomantic UI default drop shadows
   ============================================================================ */

.ui.modal,
.ui.modals .ui.modal {
  box-shadow: 0 0 0 1px rgba(22, 28, 50, 0.08);
  border-radius: var(--border-radius-medium);
}
.ui.popup,
.ui.dropdown .menu,
.ui.dropdown.upward .menu,
.ui.menu .ui.dropdown .menu {
  box-shadow: 0 0 0 1px rgba(22, 28, 50, 0.08);
  border-radius: var(--border-radius);
}
.ui.modals.dimmer { background: var(--color-overlay-backdrop); }
@media (prefers-color-scheme: dark) {
  .ui.modal,
  .ui.modals .ui.modal,
  .ui.popup,
  .ui.dropdown .menu,
  .ui.dropdown.upward .menu,
  .ui.menu .ui.dropdown .menu {
    box-shadow: 0 0 0 1px rgba(196, 202, 213, 0.10);
    background: var(--color-card);
  }
}

.ui.dropdown,
.ui.selection.dropdown {
  border-radius: var(--border-radius);
}

.ui.active.selection.dropdown,
.ui.visible.selection.dropdown {
  border-radius: var(--border-radius) var(--border-radius) 0 0 !important;
}
.ui.active.selection.dropdown .menu,
.ui.visible.selection.dropdown .menu {
  border-radius: 0 0 var(--border-radius) var(--border-radius);
}
.ui.upward.active.selection.dropdown,
.ui.upward.visible.selection.dropdown {
  border-radius: 0 0 var(--border-radius) var(--border-radius) !important;
}
.ui.upward.active.selection.dropdown .menu,
.ui.upward.visible.selection.dropdown .menu {
  border-radius: var(--border-radius) var(--border-radius) 0 0;
}

.ui.dropdown .menu {
  overflow: hidden;
}
.ui.dropdown .menu .item,
.ui.dropdown .menu .item:first-child,
.ui.dropdown .menu .item:last-child,
.ui.dropdown .menu .item:first-of-type,
.ui.dropdown .menu .item:last-of-type,
.ui.dropdown .menu .active.item,
.ui.dropdown .scrolling.menu .item,
.ui.dropdown .scrolling.menu .item:first-child {
  border: 0 !important;
  border-radius: 0 !important;
  margin: 0 !important;
  border-top: 0 !important;
  border-bottom: 0 !important;
}
.ui.dropdown .menu .item:hover,
.ui.dropdown .menu .item.selected,
.ui.dropdown .menu .item.selected:hover {
  background: var(--color-primary-alpha-10) !important;
  color: var(--color-text);
}
.ui.dropdown .menu .active.item,
.ui.dropdown .menu .active.item:hover {
  background: var(--color-primary-alpha-20) !important;
  color: var(--color-text);
  font-weight: 600;
}

/* ============================================================================
   Buttons — pills (per components-buttons.html)
   ============================================================================ */

.ui.button {
  border-radius: 9999px;
  font-weight: 500;
  letter-spacing: 0;
  transition:
    background-color 220ms cubic-bezier(0.2, 0, 0, 1),
    color 220ms cubic-bezier(0.2, 0, 0, 1),
    box-shadow 220ms cubic-bezier(0.2, 0, 0, 1);
}
.ui.buttons > .button:first-child { border-radius: 9999px 0 0 9999px; }
.ui.buttons > .button:last-child  { border-radius: 0 9999px 9999px 0; }
.ui.buttons > .button:not(:first-child):not(:last-child) { border-radius: 0; }
.ui.buttons > .button:only-child  { border-radius: 9999px; }
.ui.icon.button:not(.labeled) {
  border-radius: var(--border-radius);
}
/* Segmented-bar icon members (e.g. merge-strategy arrow next to "Create
   merge commit") — see light theme for the full rationale. */
.ui.buttons > .icon.button:first-child:not(.labeled) { border-radius: 9999px 0 0 9999px; }
.ui.buttons > .icon.button:last-child:not(.labeled)  { border-radius: 0 9999px 9999px 0; }
.ui.buttons > .icon.button:not(:first-child):not(:last-child):not(.labeled) { border-radius: 0; }
.ui.buttons > .icon.button:only-child:not(.labeled)  { border-radius: 9999px; }
/* Kill the 1px divider Forgejo draws between segmented-bar members —
   see light theme for the full rationale (it caused a flickering line
   between the merge-button halves on hover). */
.ui.buttons .button,
.ui.buttons .button:first-child,
.ui.buttons .button:hover + .button,
.ui.buttons .button.active,
.ui.buttons .button.active + .button {
  border-left: 0;
  border-right: 0;
}

.ui.primary.button,
.ui.primary.buttons .button {
  background: var(--color-primary);
  color: var(--color-primary-contrast);
  box-shadow: 0 1px 2px 0 rgba(22, 28, 50, 0.10);
}
.ui.primary.button:hover,
.ui.primary.buttons .button:hover {
  background: var(--color-primary-hover);
  box-shadow: 0 1px 2px 0 rgba(22, 28, 50, 0.14);
}
.ui.primary.button:active,
.ui.primary.buttons .button:active {
  background: var(--color-primary-active);
}
@media (prefers-color-scheme: dark) {
  .ui.primary.button,
  .ui.primary.buttons .button {
    box-shadow: none;
  }
  .ui.primary.button:hover,
  .ui.primary.buttons .button:hover {
    box-shadow: none;
  }
}

/* Only navbar items get a moderate hover-chip radius; tabular/pointing
   content menus stay flat with underline indicators. */
.navbar-left.ui.secondary.menu .item,
.navbar-right.ui.secondary.menu .item,
.navbar-mobile-right .item {
  border-radius: var(--border-radius);
}

/* ============================================================================
   Links — body links underline in oxblood
   ============================================================================ */

.markup a:not(.no-underline):not(.button):not(.label):not(.tag),
.repo-description a,
.user.profile .description a {
  color: var(--ink-500);
  text-decoration: underline;
  text-decoration-color: var(--oxblood-500);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.markup a:hover {
  color: var(--oxblood-500);
  opacity: 1;
}
@media (prefers-color-scheme: dark) {
  .markup a:not(.no-underline):not(.button):not(.label):not(.tag),
  .repo-description a,
  .user.profile .description a {
    color: var(--stone-100);
    text-decoration-color: var(--oxblood-300);
  }
  .markup a:hover { color: var(--oxblood-300); }
}

/* ============================================================================
   Code blocks
   ============================================================================ */

.markup pre {
  background: var(--color-markup-code-block);
  border-radius: var(--border-radius);
  padding: 12px 14px;
}
.markup code {
  background: var(--color-markup-code-inline);
  padding: 1px 6px;
  border-radius: 6px;
}

/* ============================================================================
   Inputs
   ============================================================================ */

/* Inputs — radius preserved on :focus by matching Forgejo's full
   selector specificity (its base hard-codes 4px on input:focus). */
.ui.input > input,
.ui.form input:not([type]),
.ui.form input[type="text"],
.ui.form input[type="email"],
.ui.form input[type="password"],
.ui.form input[type="search"],
.ui.form input[type="tel"],
.ui.form input[type="url"],
.ui.form input[type="number"],
.ui.form input[type="date"],
.ui.form input[type="datetime-local"],
.ui.form input[type="time"],
.ui.form input[type="file"],
.ui.form textarea,
.ui.input textarea,
.ui.selection.dropdown,
input.form-control,
textarea.form-control {
  border-radius: var(--border-radius);
  border-color: var(--color-input-border);
  background: var(--color-input-background);
  transition:
    border-color 220ms cubic-bezier(0.2, 0, 0, 1),
    box-shadow   220ms cubic-bezier(0.2, 0, 0, 1);
}
.ui.input > input:focus,
.ui.form input:not([type]):focus,
.ui.form input[type="text"]:focus,
.ui.form input[type="email"]:focus,
.ui.form input[type="password"]:focus,
.ui.form input[type="search"]:focus,
.ui.form input[type="tel"]:focus,
.ui.form input[type="url"]:focus,
.ui.form input[type="number"]:focus,
.ui.form input[type="date"]:focus,
.ui.form input[type="datetime-local"]:focus,
.ui.form input[type="time"]:focus,
.ui.form input[type="file"]:focus,
.ui.form textarea:focus,
.ui.input textarea:focus,
.ui.selection.dropdown:focus,
input.form-control:focus,
textarea.form-control:focus {
  border-radius: var(--border-radius);
  border-color: var(--ink-500);
  box-shadow: 0 0 0 3px rgba(26, 37, 64, 0.12);
}
@media (prefers-color-scheme: dark) {
  .ui.input > input:focus,
  .ui.form input:focus,
  .ui.form textarea:focus,
  .ui.selection.dropdown:focus,
  input.form-control:focus,
  textarea.form-control:focus {
    border-color: var(--ink-100);
    box-shadow: 0 0 0 3px rgba(196, 202, 213, 0.14);
  }
}

.code-search.tw-border {
  border: 0;
}

::selection {
  background: var(--ink-500);
  color: var(--stone-100);
}
@media (prefers-color-scheme: dark) {
  ::selection {
    background: var(--ink-100);
    color: var(--steel-900);
  }
}