/* ============================================================
    NOSCO FORGE — Forgejo Custom Theme
    Atlantic Design Language + Carta Aesthetic
    Version 4.2 — July 2026
    Playbook-compliant, WCAG 2.2 AA, dark via prefers-color-scheme
    Full Forgejo --color-* variable bridge + Chroma syntax palettes
    Audited against Forgejo v15.0.3 markup
    ============================================================ */

/* === SELF-HOSTED FONTS === */
/* Font files exist: Nunito, Plus Jakarta Sans, Nosco One Icons */
/* Fallback to system fonts for non-existent font families */
/* Nosco One Icons is registered for approved, mapped glyphs only. */
@font-face {
  font-family: 'Nosco One Icons';
  font-weight: 400;
  font-style: normal;
  font-display: block;
  src: url('../fonts/nosco-one-icons-regular.woff2') format('woff2');
}

/* Locally bundled Dashicons-compatible glyphs. Use only with aria-hidden="true"
 * and an adjacent accessible label; do not replace Forgejo's upstream UI icons. */
.nosco-icon {
  display: inline-block;
  font-family: 'Nosco One Icons' !important;
  font-style: normal;
  font-weight: 400;
  font-variant: normal;
  line-height: 1;
  speak: never;
  text-transform: none;
}
.nosco-icon::before { display: block; }
.nosco-icon--appearance::before { content: "\f100"; }
.nosco-icon--comments::before { content: "\f101"; }
.nosco-icon--home::before { content: "\f102"; }
.nosco-icon--settings::before { content: "\f108"; }
.nosco-icon--users::before { content: "\f110"; }
.nosco-icon--add::before { content: "\f132"; }
.nosco-icon--arrow-right::before { content: "\f139"; }
.nosco-icon--arrow-left::before { content: "\f141"; }
.nosco-icon--arrow-up::before { content: "\f142"; }
.nosco-icon--arrow-down::before { content: "\f140"; }
.nosco-icon--search::before { content: "\f179"; }
.nosco-icon--lock::before { content: "\f160"; }
.nosco-icon--unlock::before { content: "\f528"; }
.nosco-icon--info::before { content: "\f348"; }
.nosco-icon--warning::before { content: "\f534"; }
.nosco-icon--menu::before { content: "\f333"; }
.nosco-icon--email::before { content: "\f465"; }
.nosco-icon--calendar::before { content: "\f145"; }
.nosco-icon--clock::before { content: "\f469"; }
.nosco-icon--document::before { content: "\f497"; }
.nosco-icon--download::before { content: "\f316"; }
.nosco-icon--upload::before { content: "\f317"; }
.nosco-icon--external::before { content: "\f504"; }
.nosco-icon--visible::before { content: "\f177"; }
.nosco-icon--hidden::before { content: "\f530"; }

@font-face {
  font-family: 'Plus Jakarta Sans';
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url('../fonts/PlusJakartaSans-Regular.woff2') format('woff2'),
       url('../fonts/PlusJakartaSans-Regular.woff') format('woff');
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-weight: 400;
  font-style: italic;
  font-display: swap;
  src: url('../fonts/PlusJakartaSans-Italic.woff2') format('woff2'),
       url('../fonts/PlusJakartaSans-Italic.woff') format('woff');
}
@font-face {
  font-family: 'Nunito';
  font-weight: 200;
  font-style: normal;
  font-display: swap;
  src: url('../fonts/Nunito-ExtraLight.woff2') format('woff2'),
       url('../fonts/Nunito-ExtraLight.woff') format('woff');
}
@font-face {
  font-family: 'Nunito';
  font-weight: 200;
  font-style: italic;
  font-display: swap;
  src: url('../fonts/Nunito-ExtraLightItalic.woff2') format('woff2'),
       url('../fonts/Nunito-ExtraLightItalic.woff') format('woff');
}
@font-face {
  font-family: 'Nunito';
  font-weight: 300;
  font-style: normal;
  font-display: swap;
  src: url('../fonts/Nunito-Light.woff2') format('woff2'),
       url('../fonts/Nunito-Light.woff') format('woff');
}
@font-face {
  font-family: 'Nunito';
  font-weight: 300;
  font-style: italic;
  font-display: swap;
  src: url('../fonts/Nunito-LightItalic.woff2') format('woff2'),
       url('../fonts/Nunito-LightItalic.woff') format('woff');
}
@font-face {
  font-family: 'Nunito';
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url('../fonts/Nunito-Regular.woff2') format('woff2'),
       url('../fonts/Nunito-Regular.woff') format('woff');
}
@font-face {
  font-family: 'Nunito';
  font-weight: 400;
  font-style: italic;
  font-display: swap;
  src: url('../fonts/Nunito-Italic.woff2') format('woff2'),
       url('../fonts/Nunito-Italic.woff') format('woff');
}
@font-face {
  font-family: 'Nunito';
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  src: url('../fonts/Nunito-SemiBold.woff2') format('woff2'),
       url('../fonts/Nunito-SemiBold.woff') format('woff');
}
@font-face {
  font-family: 'Nunito';
  font-weight: 600;
  font-style: italic;
  font-display: swap;
  src: url('../fonts/Nunito-SemiBoldItalic.woff2') format('woff2'),
       url('../fonts/Nunito-SemiBoldItalic.woff') format('woff');
}
@font-face {
  font-family: 'Nunito';
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  src: url('../fonts/Nunito-Bold.woff2') format('woff2'),
       url('../fonts/Nunito-Bold.woff') format('woff');
}
@font-face {
  font-family: 'Nunito';
  font-weight: 700;
  font-style: italic;
  font-display: swap;
  src: url('../fonts/Nunito-BoldItalic.woff2') format('woff2'),
       url('../fonts/Nunito-BoldItalic.woff') format('woff');
}
@font-face {
  font-family: 'Nunito';
  font-weight: 800;
  font-style: normal;
  font-display: swap;
  src: url('../fonts/Nunito-ExtraBold.woff2') format('woff2'),
       url('../fonts/Nunito-ExtraBold.woff') format('woff');
}
@font-face {
  font-family: 'Nunito';
  font-weight: 800;
  font-style: italic;
  font-display: swap;
  src: url('../fonts/Nunito-ExtraBoldItalic.woff2') format('woff2'),
       url('../fonts/Nunito-ExtraBoldItalic.woff') format('woff');
}
@font-face {
  font-family: 'Nunito';
  font-weight: 900;
  font-style: normal;
  font-display: swap;
  src: url('../fonts/Nunito-Black.woff2') format('woff2'),
       url('../fonts/Nunito-Black.woff') format('woff');
}
@font-face {
  font-family: 'Nunito';
  font-weight: 900;
  font-style: italic;
  font-display: swap;
  src: url('../fonts/Nunito-BlackItalic.woff2') format('woff2'),
       url('../fonts/Nunito-BlackItalic.woff') format('woff');
}

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

/* === DESIGN TOKENS === */
:root {
  --nosco-shore-0: #FDFBF7;
  --nosco-shore-1: #F8F6F2;
  --nosco-shore-2: #F0EBE5;
  --nosco-shore-3: #E0D8D0;

  --nosco-boreal-0: #0F1A22;
  --nosco-boreal-1: #1A2832;
  --nosco-boreal-2: #243440;
  --nosco-boreal-3: #2E4050;

  --nosco-atlantic-0: #1A3548;
  --nosco-atlantic-1: #2B577D;
  --nosco-atlantic-2: #4A7A9C;
  --nosco-atlantic-3: #6A9ABC;

  --nosco-warmth-0: #C97B4A;
  --nosco-warmth-1: #D4885C;
  --nosco-warmth-2: #E49A6E;
  --nosco-warmth-3: #EAA853;
  --nosco-warmth-deep: #9C5228;

  --nosco-granite-0: #2A3640;
  --nosco-granite-1: #3C4A56;
  --nosco-granite-2: #4E5C68;
  --nosco-granite-3: #5C6A76;
  --nosco-granite-4: #9AA8B5;

  --nosco-green: #5F8A52;
  --nosco-yellow: #D8A442;

  --nosco-ink-black: #1A1A1A;
  --nosco-ink-ghost: #B0B0B0;
  --nosco-ink-pencil: #5C6B8F;
  --nosco-ink-highlight: #E8D880;
  --nosco-ink-alert: #A64E4E;
  --nosco-ink-sage: #547068;

  --nosco-dark-text: #E9E4DC;
  --nosco-dark-text-secondary: #EDE7DC;
  --nosco-dark-atlantic-0: #D9E6F0;
  --nosco-dark-atlantic-1: #8FB6D4;
  --nosco-dark-pencil: #9FB0D6;
  --nosco-dark-alert: #D08A8A;
  --nosco-dark-sage: #8FAEA5;
  --nosco-dark-warmth-deep: #E49A6E;

  --nosco-shore-greyed: #8A8378;
  --nosco-shore-greyed-dark: #A7B4BF;

  --nosco-font-display: 'Nunito', system-ui, -apple-system, sans-serif;
  --nosco-font-ui: 'Nunito', system-ui, -apple-system, sans-serif;
  --nosco-font-body: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;

  --nosco-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --nosco-duration: 200ms;

  --color-primary: var(--nosco-atlantic-1);

  /* === FORGEJO VARIABLE BRIDGE (light — Shore) ===
     Forgejo's base.css consumes these --color-* variables. A theme that does
     not define them leaves components (menus, cards, messages, diffs,
     reactions, tooltips) transparent or unstyled — as seen in v3.1. */
  --color-body: var(--nosco-shore-0);
  --color-box-header: var(--nosco-shore-1);
  --color-box-body: var(--nosco-shore-0);
  --color-box-body-highlight: var(--nosco-shore-2);
  --color-text-dark: var(--nosco-ink-black);
  --color-text: var(--nosco-granite-0);
  --color-text-light: var(--nosco-granite-1);
  --color-text-light-1: var(--nosco-granite-2);
  --color-text-light-2: var(--nosco-granite-3);
  --color-text-light-3: var(--nosco-granite-4);
  --color-footer: var(--nosco-shore-1);
  --color-timeline: var(--nosco-shore-3);
  --color-input-text: var(--nosco-granite-0);
  --color-input-background: var(--nosco-shore-0);
  --color-input-toggle-background: var(--nosco-shore-0);
  --color-input-border: var(--nosco-shore-3);
  --color-input-border-hover: var(--nosco-atlantic-2);
  --color-header-wrapper: var(--nosco-shore-1);
  --color-header-wrapper-transparent: #F8F6F200;
  --color-light: #FDFBF7cc;
  --color-light-border: #0F1A221d;
  --color-light-mimic-enabled: rgba(0, 0, 0, calc(6 / 255 * 222 / 255 / var(--opacity-disabled)));
  --color-hover: rgba(43, 87, 125, 0.08);
  --color-active: rgba(43, 87, 125, 0.14);
  --color-menu: var(--nosco-shore-0);
  --color-card: var(--nosco-shore-0);
  --fancy-card-bg: var(--nosco-shore-1);
  --fancy-card-border: var(--nosco-shore-3);
  --color-markup-table-row: rgba(43, 87, 125, 0.04);
  --color-markup-code-block: var(--nosco-shore-2);
  --color-markup-code-inline: var(--nosco-shore-2);
  --color-button: var(--nosco-shore-2);
  --color-code-bg: var(--nosco-shore-0);
  --color-shadow: rgba(15, 26, 34, 0.35);
  --color-secondary-bg: var(--nosco-shore-1);
  --color-text-focus: var(--nosco-atlantic-2);
  --color-expand-button: var(--nosco-shore-3);
  --color-placeholder-text: var(--nosco-granite-4);
  --color-editor-line-highlight: var(--nosco-shore-1);
  --color-caret: var(--nosco-granite-0);
  --color-reaction-bg: rgba(43, 87, 125, 0.06);
  --color-reaction-active-bg: rgba(43, 87, 125, 0.2);
  --color-reaction-hover-bg: rgba(43, 87, 125, 0.3);
  --color-tooltip-text: var(--nosco-shore-1);
  --color-tooltip-bg: var(--nosco-boreal-0);
  --color-nav-bg: var(--nosco-shore-1);
  --color-nav-hover-bg: var(--nosco-shore-3);
  --color-secondary-nav-bg: var(--nosco-shore-0);
  --color-label-text: var(--nosco-granite-0);
  --color-label-bg: rgba(74, 122, 156, 0.14);
  --color-label-hover-bg: rgba(74, 122, 156, 0.22);
  --color-label-active-bg: rgba(74, 122, 156, 0.3);
  --color-label-bg-alt: rgba(74, 122, 156, 0.18);
  --color-accent: var(--nosco-atlantic-2);
  --color-small-accent: var(--nosco-atlantic-3);
  --color-highlight-fg: var(--nosco-atlantic-0);
  --color-highlight-bg: #DDEAF4;
  --color-overlay-backdrop: rgba(15, 26, 34, 0.6);
  --color-selection-bg: rgba(212, 136, 92, 0.25);
  --color-selection-fg: var(--nosco-granite-0);
  --checkerboard-color-1: var(--nosco-shore-0);
  --checkerboard-color-2: var(--nosco-shore-2);
  --color-gold: var(--nosco-warmth-3);
  --color-project-board-bg: var(--nosco-shore-1);
  --color-project-board-dark-label: var(--nosco-granite-2);

  /* primary — Atlantic scale */
  --color-primary-contrast: var(--nosco-shore-0);
  --color-primary-dark-1: #2B577D;
  --color-primary-dark-2: #26506F;
  --color-primary-dark-3: #1A3548;
  --color-primary-dark-4: #16303F;
  --color-primary-dark-5: #16303F;
  --color-primary-dark-6: #16303F;
  --color-primary-dark-7: #16303F;
  --color-primary-light-1: #3A6A93;
  --color-primary-light-2: #4A7A9C;
  --color-primary-light-3: #6A9ABC;
  --color-primary-light-4: #8FB6D4;
  --color-primary-light-5: #BFD6E8;
  --color-primary-light-6: #DDEAF4;
  --color-primary-light-7: #EEF5FA;
  --color-primary-alpha-10: #2B577D19;
  --color-primary-alpha-20: #2B577D33;
  --color-primary-alpha-30: #2B577D4b;
  --color-primary-alpha-40: #2B577D66;
  --color-primary-alpha-50: #2B577D80;
  --color-primary-alpha-60: #2B577D99;
  --color-primary-alpha-70: #2B577Db3;
  --color-primary-alpha-80: #2B577Dcc;
  --color-primary-alpha-90: #2B577De1;
  --color-primary-hover: var(--nosco-atlantic-0);
  --color-primary-active: #16303F;

  /* secondary — Shore scale */
  --color-secondary: var(--nosco-shore-2);
  --color-secondary-dark-1: #F0EBE5;
  --color-secondary-dark-2: #E0D8D0;
  --color-secondary-dark-3: #E0D8D0;
  --color-secondary-dark-4: #CFC6BB;
  --color-secondary-dark-5: #CFC6BB;
  --color-secondary-dark-6: #B8AEA2;
  --color-secondary-dark-7: #B8AEA2;
  --color-secondary-dark-8: #9AA8B5;
  --color-secondary-dark-9: #9AA8B5;
  --color-secondary-dark-10: #5C6A76;
  --color-secondary-dark-11: #5C6A76;
  --color-secondary-dark-12: #3C4A56;
  --color-secondary-dark-13: #3C4A56;
  --color-secondary-light-1: #F0EBE5;
  --color-secondary-light-2: #F8F6F2;
  --color-secondary-light-3: #F8F6F2;
  --color-secondary-light-4: #FDFBF7;
  --color-secondary-alpha-10: #E0D8D019;
  --color-secondary-alpha-20: #E0D8D033;
  --color-secondary-alpha-30: #E0D8D04b;
  --color-secondary-alpha-40: #E0D8D066;
  --color-secondary-alpha-50: #E0D8D080;
  --color-secondary-alpha-60: #E0D8D099;
  --color-secondary-alpha-70: #E0D8D0b3;
  --color-secondary-alpha-80: #E0D8D0cc;
  --color-secondary-alpha-90: #E0D8D0e1;

  /* status messages — Carta inks on tinted paper */
  --color-info-bg: #E9EFF6;
  --color-info-border: #C3D3E4;
  --color-info-text: var(--nosco-atlantic-0);
  --color-success-bg: #E5EDE8;
  --color-success-border: #C0CFC7;
  --color-success-text: #3E544D;
  --color-warning-bg: #F7EFDC;
  --color-warning-border: #E6D7B2;
  --color-warning-text: var(--nosco-warmth-deep);
  --color-error-bg: #F4E6E6;
  --color-error-bg-active: #E7CFCF;
  --color-error-bg-hover: #EDD9D9;
  --color-error-border: #DFC2C2;
  --color-error-text: var(--nosco-ink-alert);

  /* diffs — sage green & alert brick */
  --color-diff-added-row-bg: rgba(84, 112, 104, 0.14);
  --color-diff-added-row-border: rgba(84, 112, 104, 0.4);
  --color-diff-added-word-bg: rgba(84, 112, 104, 0.32);
  --color-diff-removed-row-bg: rgba(166, 78, 78, 0.1);
  --color-diff-removed-row-border: rgba(166, 78, 78, 0.35);
  --color-diff-removed-word-bg: rgba(166, 78, 78, 0.28);
  --color-diff-moved-row-bg: rgba(74, 122, 156, 0.12);
  --color-diff-moved-row-border: rgba(74, 122, 156, 0.35);
  --color-diff-inactive: var(--nosco-shore-1);

  /* console & ANSI — always Boreal, as in Forgejo's own themes */
  --color-console-fg: #D9E6F0;
  --color-console-fg-subtle: #8A99A6;
  --color-console-bg: var(--nosco-boreal-0);
  --color-console-border: var(--nosco-boreal-3);
  --color-console-hover-bg: #FFFFFF14;
  --color-console-active-bg: var(--nosco-boreal-3);
  --color-console-menu-bg: var(--nosco-boreal-2);
  --color-console-menu-border: #3E5568;
  --color-ansi-black: #1A2832;
  --color-ansi-red: #D08A8A;
  --color-ansi-green: #8FAEA5;
  --color-ansi-yellow: #EAA853;
  --color-ansi-blue: #8FB6D4;
  --color-ansi-magenta: #C39BBD;
  --color-ansi-cyan: #7FB5B5;
  --color-ansi-white: var(--color-console-fg-subtle);
  --color-ansi-bright-black: #4E5C68;
  --color-ansi-bright-red: #DEA3A3;
  --color-ansi-bright-green: #A5C0B9;
  --color-ansi-bright-yellow: #F0BC72;
  --color-ansi-bright-blue: #AAC6DE;
  --color-ansi-bright-magenta: #D2B3CD;
  --color-ansi-bright-cyan: #9AC7C7;
  --color-ansi-bright-white: var(--color-console-fg);

  /* status indicators — semantic, kept from Forgejo defaults */
  --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-scheme: light;
  --color-red: #e51c23;
  --color-orange: #f97b21;
  --color-yellow: #f2c037;
  --color-olive: #a5c25b;
  --color-green: #8faa54;
  --color-teal: #39b5aa;
  --color-blue: #3278b3;
  --color-violet: #967adc;
  --color-brown: #a36733;
  --color-grey: #6c6c6c;
  --color-grey-darker: #4a4a4a;
  --color-black: var(--nosco-boreal-0);
  --color-white: var(--nosco-shore-0);

  --fonts-proportional: var(--nosco-font-body);
  --fonts-monospace: 'Source Code Pro', 'Fira Code', 'JetBrains Mono', ui-monospace, monospace;
  --fonts-emoji: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif;
}

/* ============================================================
    GLOBAL STYLES & PAPER TEXTURE
    ============================================================ */

body,
body.user,
body.public {
  font-family: var(--nosco-font-body) !important;
  color: var(--nosco-granite-0) !important;
  background-color: var(--nosco-shore-0) !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
}

body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.015;
  pointer-events: none;
  z-index: 0;
  mix-blend-mode: multiply;
}

#content {
  position: relative;
  z-index: 1;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--nosco-font-display) !important;
  color: var(--nosco-atlantic-0) !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
}

a:not(.button):not(.primary) {
  color: var(--nosco-atlantic-1) !important;
}

a:not(.button):not(.primary):hover {
  color: var(--nosco-atlantic-0) !important;
}

::selection {
  background: rgba(212, 136, 92, 0.25) !important;
}

input:focus,
textarea:focus,
select:focus,
[contenteditable]:focus {
  border-color: var(--nosco-atlantic-2) !important;
  box-shadow: 0 0 0 2px rgba(74, 122, 156, 0.15) !important;
}

/* ============================================================
    HEADER
    ============================================================ */

/* Forgejo 15 navbar — <nav id="navbar"> with .navbar-left / .navbar-right */
#navbar {
  background-color: var(--nosco-shore-1) !important;
  border-bottom: 1px solid var(--nosco-shore-3) !important;
  box-shadow: 0 1px 3px rgba(15, 26, 34, 0.04) !important;
}

#navbar .navbar-left .item {
  color: var(--nosco-granite-0) !important;
  transition: color var(--nosco-duration) var(--nosco-ease) !important;
}

#navbar .navbar-left .item.active,
#navbar .navbar-left .item:hover {
  color: var(--nosco-atlantic-0) !important;
  background-color: rgba(43, 87, 125, 0.08) !important;
}

/* navbar-right icon links (bell, plus, avatar menus) */
#navbar .navbar-right > .item,
#navbar .navbar-right details.dropdown summary {
  color: var(--nosco-granite-1) !important;
  transition: color var(--nosco-duration) var(--nosco-ease) !important;
}

#navbar .navbar-right > .item:hover,
#navbar .navbar-right details.dropdown summary:hover,
#navbar .navbar-right details.dropdown[open] summary {
  color: var(--nosco-atlantic-0) !important;
}

#navbar .notification_count {
  background-color: var(--nosco-warmth-deep) !important;
  color: var(--nosco-shore-0) !important;
}

/* mobile hamburger — shield it from the blanket .ui.button styles */
#navbar-expand-toggle,
#navbar-expand-toggle.ui.button {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  opacity: 0.7 !important;
  color: var(--nosco-granite-1) !important;
  transition: opacity var(--nosco-duration) var(--nosco-ease) !important;
}

#navbar-expand-toggle:hover,
#navbar-expand-toggle.ui.button:hover {
  opacity: 1 !important;
  background-color: rgba(43, 87, 125, 0.08) !important;
  color: var(--nosco-atlantic-0) !important;
}

/* ============================================================
    BUTTONS
    ============================================================ */

.ui.button,
.ui.primary.button,
button.ui.button {
  background-color: var(--nosco-atlantic-1) !important;
  border-color: var(--nosco-atlantic-1) !important;
  color: var(--nosco-shore-0) !important;
  font-family: var(--nosco-font-ui) !important;
  font-weight: 600 !important;
  border-radius: 8px !important;
  transition: background-color var(--nosco-duration) var(--nosco-ease),
              border-color var(--nosco-duration) var(--nosco-ease),
              box-shadow var(--nosco-duration) var(--nosco-ease) !important;
}

.ui.button:hover,
.ui.primary.button:hover,
button.ui.button:hover {
  background-color: var(--nosco-atlantic-0) !important;
  border-color: var(--nosco-atlantic-0) !important;
  color: var(--nosco-shore-0) !important;
  box-shadow: 0 4px 12px rgba(43, 87, 125, 0.2) !important;
}

.ui.button.primary,
.button.primary,
button.ui.button.primary,
input[type="submit"].ui.button.primary {
  background-color: var(--nosco-atlantic-0) !important;
  border-color: var(--nosco-atlantic-0) !important;
}

.ui.button.primary:hover,
.button.primary:hover,
button.ui.button.primary:hover,
input[type="submit"].ui.button.primary:hover {
  background-color: var(--nosco-atlantic-1) !important;
  border-color: var(--nosco-atlantic-1) !important;
}

.ui.button.negative,
.button.negative,
button.ui.button.negative,
input[type="submit"].ui.button.negative {
  background-color: #C71820 !important;
  border-color: #C71820 !important;
  color: var(--nosco-shore-0) !important;
}

.ui.button.negative:hover,
.button.negative:hover,
button.ui.button.negative:hover,
input[type="submit"].ui.button.negative:hover {
  background-color: #A81319 !important;
  border-color: #A81319 !important;
  color: var(--nosco-shore-0) !important;
}

.ui.basic.button {
  background-color: transparent !important;
  border: 1px solid var(--nosco-shore-3) !important;
  color: var(--nosco-granite-0) !important;
}

.ui.basic.button:hover {
  background-color: var(--nosco-shore-1) !important;
  border-color: var(--nosco-atlantic-2) !important;
  color: var(--nosco-atlantic-0) !important;
}

/* ============================================================
    FORMS
    ============================================================ */

.field input,
.field textarea,
.field select {
  border: 1px solid var(--nosco-shore-3) !important;
  border-radius: 4px !important;
  background-color: var(--nosco-shore-0) !important;
  color: var(--nosco-granite-0) !important;
  font-family: var(--nosco-font-body) !important;
}

.field input:focus,
.field textarea:focus,
.field select:focus {
  border-color: var(--nosco-atlantic-2) !important;
  box-shadow: 0 0 0 2px rgba(74, 122, 156, 0.15) !important;
}

/* ============================================================
    TABLES
    ============================================================ */

.ui.table thead th {
  background-color: var(--nosco-shore-2) !important;
  color: var(--nosco-granite-0) !important;
  border-bottom: 1px solid var(--nosco-shore-3) !important;
}

.ui.table tbody tr {
  background-color: var(--nosco-shore-0) !important;
}

.ui.table tbody tr:hover {
  background-color: var(--nosco-shore-1) !important;
}

.ui.table tbody td {
  border-top: 1px solid var(--nosco-shore-3) !important;
  color: var(--nosco-granite-0) !important;
}

/* ============================================================
    MENUS & SIDEBARS
    ============================================================ */

.ui.vertical.menu .item {
  border-left: 3px solid transparent !important;
}

.ui.vertical.menu .item.active {
  border-left-color: var(--nosco-warmth-0) !important;
  background-color: var(--nosco-shore-1) !important;
  color: var(--nosco-atlantic-0) !important;
}

/* One warmth moment per view — active tab indicator */
.ui.secondary.pointing.menu .item.active,
.ui.tabular.menu .item.active {
  border-color: var(--nosco-warmth-0) !important;
  color: var(--nosco-atlantic-0) !important;
  font-weight: 600 !important;
}

/* ============================================================
    MODALS & DROPDOWNS
    ============================================================ */

.ui.modal {
  background-color: var(--nosco-shore-0) !important;
  border: 1px solid var(--nosco-shore-3) !important;
  box-shadow: 0 8px 32px rgba(15, 26, 34, 0.15) !important;
  border-radius: 16px !important;
}

.ui.dropdown .menu {
  border: 1px solid var(--nosco-shore-3) !important;
  background-color: var(--nosco-shore-0) !important;
  border-radius: 8px !important;
  box-shadow: 0 8px 24px rgba(15, 26, 34, 0.12) !important;
}

.ui.dropdown .menu .item {
  color: var(--nosco-granite-0) !important;
}

.ui.dropdown .menu .item:hover,
.ui.dropdown .menu .item:focus-visible {
  background-color: var(--nosco-shore-1) !important;
  color: var(--nosco-atlantic-0) !important;
}

/* Forgejo 15 header dropdowns — <details class="dropdown"> markup */
details.dropdown .content {
  background-color: var(--nosco-shore-0) !important;
  border: 1px solid var(--nosco-shore-3) !important;
  border-radius: 12px !important;
  box-shadow: 0 8px 24px rgba(15, 26, 34, 0.12) !important;
  padding: 8px !important;
}

details.dropdown .content > .header {
  font-family: var(--nosco-font-ui) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: var(--nosco-granite-3) !important;
  padding: 6px 12px !important;
}

details.dropdown .content > .header strong {
  color: var(--nosco-atlantic-0) !important;
}

details.dropdown .content hr {
  border-top: 1px solid var(--nosco-shore-3) !important;
  border-bottom: none !important;
  margin: 6px 4px !important;
}

details.dropdown .content ul {
  margin: 0 !important;
  padding: 0 !important;
}

details.dropdown .content ul li {
  list-style: none !important;
}

details.dropdown .content ul li a {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 9px 12px !important;
  border-radius: 8px !important;
  color: var(--nosco-granite-0) !important;
  font-family: var(--nosco-font-ui) !important;
  font-size: 14px !important;
  transition: background-color var(--nosco-duration) var(--nosco-ease),
              color var(--nosco-duration) var(--nosco-ease) !important;
}

details.dropdown .content ul li a svg {
  color: var(--nosco-granite-3) !important;
  opacity: 0.8 !important;
}

details.dropdown .content ul li a:hover,
details.dropdown .content ul li a:focus-visible {
  background-color: var(--nosco-shore-1) !important;
  color: var(--nosco-atlantic-0) !important;
}

details.dropdown .content ul li a:hover svg,
details.dropdown .content ul li a:focus-visible svg {
  color: var(--nosco-atlantic-1) !important;
  opacity: 1 !important;
}

details.dropdown .content ul li a:focus-visible {
  outline: 2px solid var(--nosco-atlantic-2) !important;
  outline-offset: -2px !important;
}

details.dropdown summary {
  cursor: pointer !important;
  color: var(--nosco-granite-1) !important;
}

details.dropdown summary:hover,
details.dropdown[open] summary {
  color: var(--nosco-atlantic-0) !important;
}

/* Tooltips & popups */
.tippy-box {
  background-color: var(--nosco-boreal-0) !important;
  color: var(--nosco-shore-1) !important;
  border: 1px solid var(--nosco-boreal-3) !important;
  border-radius: 8px !important;
  font-family: var(--nosco-font-ui) !important;
  font-size: 12.5px !important;
  box-shadow: 0 8px 24px rgba(15, 26, 34, 0.18) !important;
}

.tippy-box .tippy-arrow {
  color: var(--nosco-boreal-0) !important;
}

.ui.popup {
  background-color: var(--nosco-shore-0) !important;
  border: 1px solid var(--nosco-shore-3) !important;
  border-radius: 10px !important;
  box-shadow: 0 8px 24px rgba(15, 26, 34, 0.12) !important;
  color: var(--nosco-granite-0) !important;
  font-family: var(--nosco-font-ui) !important;
}

.ui.popup::before {
  background-color: var(--nosco-shore-0) !important;
  border: 1px solid var(--nosco-shore-3) !important;
  box-shadow: none !important;
}

.toastify {
  border-radius: 12px !important;
  font-family: var(--nosco-font-ui) !important;
  box-shadow: 0 8px 24px rgba(15, 26, 34, 0.12) !important;
}

/* ============================================================
    REPOSITORY PAGE
    ============================================================ */

/* Forgejo 15 repo header — .secondary-nav wrapper, .repo-header title row */
.secondary-nav {
  background-color: var(--nosco-shore-1) !important;
  border-bottom: 1px solid var(--nosco-shore-3) !important;
}

.repo-header .flex-item-title a {
  color: var(--nosco-atlantic-1) !important;
}

.repo-header .flex-item-title a:hover {
  color: var(--nosco-atlantic-0) !important;
}

.fork-flag {
  background-color: var(--nosco-shore-2) !important;
  border-top: 1px solid var(--nosco-shore-3) !important;
  color: var(--nosco-granite-1) !important;
}

/* ============================================================
    CODE BLOCKS
    ============================================================ */

pre,
code,
.pre-code,
.code-view,
.code-line,
.lines-code,
.lines-num {
  font-family: var(--fonts-monospace) !important;
}

.pre-code,
.code-view {
  background-color: var(--nosco-shore-2) !important;
  border: 1px solid var(--nosco-shore-3) !important;
  color: var(--nosco-granite-0) !important;
  border-radius: 6px !important;
}

.lines-num {
  color: var(--nosco-granite-2) !important;
  background-color: var(--nosco-shore-1) !important;
}

/* ============================================================
    ISSUES & PULL REQUESTS
    ============================================================ */

.ui.label:not(.primary):not(.basic) {
  background-color: var(--nosco-shore-2) !important;
  color: var(--nosco-granite-0) !important;
  border-radius: 6px !important;
}

.ui.label.important {
  background-color: var(--nosco-warmth-0) !important;
  color: var(--nosco-boreal-0) !important;
}

.ui.label.success,
.ui.label.green {
  background-color: #4A6F3E !important; /* deepened from --nosco-green for 4.5:1 on Shore-0 text */
  color: var(--nosco-shore-0) !important;
}

.ui.label.warning,
.ui.label.yellow {
  background-color: var(--nosco-yellow) !important;
  color: var(--nosco-boreal-0) !important;
}

.ui.label.red {
  background-color: #C71820 !important; /* deepened from --color-red for 4.5:1 on Shore-0 text */
  color: var(--nosco-shore-0) !important;
}

/* ============================================================
    BREADCRUMBS & NAVIGATION
    ============================================================ */

.breadcrumb {
  font-family: var(--nosco-font-ui) !important;
  font-weight: 500 !important;
  color: var(--nosco-granite-0) !important;
}

/* ============================================================
    SCROLLBAR
    ============================================================ */

::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: var(--nosco-shore-3);
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--nosco-granite-3);
}

* {
  scrollbar-width: thin;
  scrollbar-color: var(--nosco-shore-3) transparent;
}

/* ============================================================
    FOOTER
    ============================================================ */

.page-footer {
  background-color: var(--nosco-shore-1) !important;
  border-top: 1px solid var(--nosco-shore-3) !important;
  color: var(--nosco-granite-2) !important;
}

.page-footer .right-links a {
  color: var(--nosco-atlantic-1) !important;
}

.page-footer .right-links a:hover {
  color: var(--nosco-atlantic-0) !important;
}

.nosco-footer-brand {
  display: flex !important;
  align-items: baseline !important;
  gap: 12px !important;
}

.nosco-footer-wordmark {
  font-family: var(--nosco-font-display) !important;
  font-weight: 800 !important;
  font-size: 15px !important;
  letter-spacing: -0.01em !important;
  color: var(--nosco-atlantic-0) !important;
}

.nosco-footer-signature {
  font-family: var(--nosco-font-ui) !important;
  font-weight: 600 !important;
  font-size: 9px !important;
  letter-spacing: 0.24em !important;
  text-transform: uppercase !important;
  color: var(--nosco-shore-greyed) !important;
}

 

 

 

 

 

 

/* ============================================================
    LOGIN PAGE — ROTATING BACKGROUND
    Forgejo 15 signin markup: <div class="page-content user signin">
    with .ui.top.attached.header + .ui.attached.segment. The JS
    adds .nosco-login-active to <html> and sets --nosco-login-bg.
    ============================================================ */

@keyframes nosco-login-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes nosco-login-card-rise {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

html.nosco-login-active body {
  background-image: var(--nosco-login-bg-webkit, none);
  background-image: var(--nosco-login-bg, none);
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-attachment: fixed !important;
}

/* Overlay replaces the paper texture on the login page */
html.nosco-login-active body::before {
  content: '' !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  background: linear-gradient(
    180deg,
    rgba(15, 26, 34, 0.4) 0%,
    rgba(15, 26, 34, 0.6) 50%,
    rgba(15, 26, 34, 0.85) 100%
  ) !important;
  opacity: 1 !important;
  mix-blend-mode: normal !important;
  z-index: 0 !important;
  animation: nosco-login-fade 1.2s var(--nosco-ease) both !important;
  pointer-events: none !important;
}

/* Lift structural blocks above the overlay (not tippy/poppers) */
html.nosco-login-active #navbar,
html.nosco-login-active .page-content,
html.nosco-login-active .page-footer {
  position: relative !important;
  z-index: 1 !important;
}

/* Carta glass card */
html.nosco-login-active .page-content.user.signin .ui.top.attached.header,
html.nosco-login-active .page-content.user.signin .ui.attached.segment {
  background: rgba(253, 251, 247, 0.92) !important;
  backdrop-filter: blur(20px) saturate(1.2) !important;
  -webkit-backdrop-filter: blur(20px) saturate(1.2) !important;
  border-color: rgba(253, 251, 247, 0.3) !important;
  color: var(--nosco-granite-0) !important;
}

html.nosco-login-active .page-content.user.signin .ui.attached.segment {
  box-shadow:
    0 8px 32px rgba(15, 26, 34, 0.2),
    0 2px 8px rgba(15, 26, 34, 0.1),
    inset 0 1px 0 rgba(253, 251, 247, 0.4) !important;
  animation: nosco-login-card-rise 0.8s var(--nosco-ease) 0.3s both !important;
}

html.nosco-login-active .page-content.user.signin .ui.top.attached.header {
  font-family: var(--nosco-font-display) !important;
  font-weight: 700 !important;
  color: var(--nosco-atlantic-0) !important;
}

/* Navbar & footer float over the image */
html.nosco-login-active #navbar {
  background: transparent !important;
  border-bottom: none !important;
  box-shadow: none !important;
}

html.nosco-login-active #navbar .item,
html.nosco-login-active #navbar details.dropdown summary {
  color: rgba(253, 251, 247, 0.9) !important;
  text-shadow: 0 1px 2px rgba(15, 26, 34, 0.4) !important;
}

html.nosco-login-active #navbar .item:hover,
html.nosco-login-active #navbar details.dropdown summary:hover {
  color: var(--nosco-shore-0) !important;
  background-color: rgba(253, 251, 247, 0.12) !important;
}

html.nosco-login-active .page-footer {
  background: transparent !important;
  border-top: none !important;
}

html.nosco-login-active .page-footer,
html.nosco-login-active .page-footer .flex-text-inline {
  color: rgba(253, 251, 247, 0.85) !important;
  text-shadow: 0 1px 2px rgba(15, 26, 34, 0.3) !important;
}

html.nosco-login-active .page-footer a {
  color: rgba(253, 251, 247, 0.9) !important;
  text-shadow: 0 1px 2px rgba(15, 26, 34, 0.3) !important;
}

html.nosco-login-active .page-footer a:hover {
  color: var(--nosco-shore-0) !important;
}

html.nosco-login-active .nosco-footer-wordmark {
  color: var(--nosco-shore-0) !important;
}

html.nosco-login-active .nosco-footer-signature {
  color: rgba(253, 251, 247, 0.75) !important;
}

/* ============================================================
    SYNTAX HIGHLIGHTING — CHROMA, CARTA INKS (light)
    The theme replaces Forgejo's bundled chroma palette; these
    rules recolour code with playbook inks on Shore paper.
    ============================================================ */

.chroma .c, .chroma .ch, .chroma .cm, .chroma .c1, .chroma .cs {
  color: var(--nosco-granite-3); font-style: italic;
}
.chroma .cp, .chroma .cpf { color: #57668A; }
.chroma .k, .chroma .kc, .chroma .kd, .chroma .kn, .chroma .kp, .chroma .kr {
  color: var(--nosco-atlantic-1); font-weight: 600;
}
.chroma .kt { color: #57668A; }
.chroma .s, .chroma .sa, .chroma .sb, .chroma .sc, .chroma .dl, .chroma .sd,
.chroma .s1, .chroma .s2, .chroma .sh, .chroma .si, .chroma .sr, .chroma .ss, .chroma .sx {
  color: var(--nosco-ink-sage);
}
.chroma .se { color: var(--nosco-warmth-deep); }
.chroma .m, .chroma .mb, .chroma .mf, .chroma .mh, .chroma .mi, .chroma .il, .chroma .mo {
  color: var(--nosco-warmth-deep);
}
.chroma .nd, .chroma .nl { color: var(--nosco-warmth-deep); }
.chroma .na { color: #416E8C; } /* atlantic-2 shaded to 4.6:1 on Shore-2 code paper */
.chroma .nb, .chroma .bp { color: #57668A; }
.chroma .nc, .chroma .ne, .chroma .nn { color: var(--nosco-atlantic-0); }
.chroma .nf, .chroma .fm { color: var(--nosco-atlantic-0); font-weight: 600; }
.chroma .nt { color: var(--nosco-atlantic-1); font-weight: 600; }
.chroma .o, .chroma .ow { color: var(--nosco-granite-1); }
.chroma .p { color: var(--nosco-granite-2); }
.chroma .gh { color: var(--nosco-atlantic-0); font-weight: 700; }
.chroma .ge { font-style: italic; }
.chroma .gs { font-weight: 700; }
.chroma .gu, .chroma .go { color: var(--nosco-granite-3); }
.chroma .gp { color: var(--nosco-atlantic-3); }
.chroma .gr, .chroma .gt, .chroma .err { color: var(--nosco-ink-alert); }
.chroma .gi { background-color: rgba(84, 112, 104, 0.18); }
.chroma .gd { background-color: rgba(166, 78, 78, 0.14); }

/* ============================================================
    ACCESSIBILITY — REDUCED MOTION
    ============================================================ */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ============================================================
    DARK MODE — BOREAL (prefers-color-scheme: dark)
    Forgejo 15 sets data-theme to the theme NAME (no .theme-dark
    class), so dark mode follows the OS via media query — the
    same mechanism as Forgejo's own forgejo-auto theme.
    ============================================================ */

@media (prefers-color-scheme: dark) {

body,
body.user,
body.public {
  background-color: var(--nosco-boreal-0) !important;
  color: var(--nosco-dark-text) !important;
}

body::before {
  mix-blend-mode: screen;
  opacity: 0.03;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--nosco-dark-text) !important;
}

a:not(.button):not(.primary) {
  color: var(--nosco-dark-atlantic-1) !important;
}

a:not(.button):not(.primary):hover {
  color: var(--nosco-dark-atlantic-0) !important;
}

::selection {
  background: rgba(201, 123, 74, 0.3) !important;
}

input:focus,
textarea:focus,
select:focus,
[contenteditable]:focus {
  border-color: var(--nosco-atlantic-2) !important;
  box-shadow: 0 0 0 2px rgba(74, 122, 156, 0.25) !important;
}

#navbar {
  background-color: var(--nosco-boreal-1) !important;
  border-bottom: 1px solid var(--nosco-boreal-3) !important;
  box-shadow: 0 1px 3px rgba(15, 26, 34, 0.3) !important;
}

#navbar .navbar-left .item {
  color: var(--nosco-dark-text) !important;
}

#navbar .navbar-left .item.active,
#navbar .navbar-left .item:hover {
  color: var(--nosco-atlantic-3) !important;
  background-color: rgba(74, 122, 156, 0.3) !important;
}

#navbar .navbar-right > .item,
#navbar .navbar-right details.dropdown summary {
  color: var(--nosco-dark-text) !important;
}

#navbar .navbar-right > .item:hover,
#navbar .navbar-right details.dropdown summary:hover,
#navbar .navbar-right details.dropdown[open] summary {
  color: var(--nosco-atlantic-3) !important;
}

#navbar-expand-toggle,
#navbar-expand-toggle.ui.button {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  color: var(--nosco-dark-text) !important;
}

#navbar-expand-toggle:hover,
#navbar-expand-toggle.ui.button:hover {
  background-color: rgba(74, 122, 156, 0.3) !important;
  color: var(--nosco-atlantic-3) !important;
}

.field input,
.field textarea,
.field select {
  background-color: var(--nosco-boreal-2) !important;
  border-color: var(--nosco-boreal-3) !important;
  color: var(--nosco-dark-text) !important;
}

.field input:focus,
.field textarea:focus,
.field select:focus {
  border-color: var(--nosco-atlantic-2) !important;
  box-shadow: 0 0 0 2px rgba(74, 122, 156, 0.25) !important;
}

.ui.table thead th {
  background-color: var(--nosco-boreal-2) !important;
  color: var(--nosco-dark-text) !important;
  border-bottom: 1px solid var(--nosco-boreal-3) !important;
}

.ui.table tbody tr {
  background-color: var(--nosco-boreal-0) !important;
}

.ui.table tbody tr:hover {
  background-color: var(--nosco-boreal-1) !important;
}

.ui.table tbody td {
  border-top: 1px solid var(--nosco-boreal-3) !important;
  color: var(--nosco-dark-text) !important;
}

.ui.vertical.menu .item.active {
  border-left-color: var(--nosco-warmth-0) !important;
  background-color: var(--nosco-boreal-1) !important;
  color: var(--nosco-atlantic-3) !important;
}

.ui.secondary.pointing.menu .item.active,
.ui.tabular.menu .item.active {
  border-color: var(--nosco-warmth-0) !important;
  color: var(--nosco-atlantic-3) !important;
}

.ui.modal {
  background-color: var(--nosco-boreal-0) !important;
  border: 1px solid var(--nosco-boreal-3) !important;
  box-shadow: 0 8px 32px rgba(15, 26, 34, 0.5) !important;
  border-radius: 16px !important;
}

.ui.dropdown .menu {
  border: 1px solid var(--nosco-boreal-3) !important;
  background-color: var(--nosco-boreal-1) !important;
  border-radius: 8px !important;
  box-shadow: 0 8px 24px rgba(15, 26, 34, 0.4) !important;
}

/* Must beat the light-mode .ui.dropdown .menu .item rules in dark mode */
.ui.dropdown .menu .item {
  color: var(--nosco-dark-text) !important;
}

.ui.dropdown .menu .item:hover,
.ui.dropdown .menu .item:focus-visible {
  background-color: var(--nosco-boreal-2) !important;
  color: var(--nosco-dark-atlantic-0) !important;
}

details.dropdown .content {
  background-color: var(--nosco-boreal-1) !important;
  border: 1px solid var(--nosco-boreal-3) !important;
  box-shadow: 0 8px 24px rgba(15, 26, 34, 0.4) !important;
}

details.dropdown .content > .header {
  color: var(--nosco-shore-greyed-dark) !important;
}

details.dropdown .content > .header strong {
  color: var(--nosco-dark-atlantic-0) !important;
}

details.dropdown .content hr {
  border-top-color: var(--nosco-boreal-3) !important;
}

details.dropdown .content ul li a {
  color: var(--nosco-dark-text) !important;
}

details.dropdown .content ul li a svg {
  color: var(--nosco-shore-greyed-dark) !important;
}

details.dropdown .content ul li a:hover,
details.dropdown .content ul li a:focus-visible {
  background-color: var(--nosco-boreal-2) !important;
  color: var(--nosco-dark-atlantic-0) !important;
}

details.dropdown .content ul li a:hover svg,
details.dropdown .content ul li a:focus-visible svg {
  color: var(--nosco-dark-atlantic-0) !important;
}

details.dropdown summary {
  color: var(--nosco-dark-text) !important;
}

details.dropdown summary:hover,
details.dropdown[open] summary {
  color: var(--nosco-atlantic-3) !important;
}

.tippy-box {
  background-color: var(--nosco-boreal-2) !important;
  color: var(--nosco-dark-text) !important;
  border-color: var(--nosco-boreal-3) !important;
  box-shadow: 0 8px 24px rgba(15, 26, 34, 0.4) !important;
}

.tippy-box .tippy-arrow {
  color: var(--nosco-boreal-2) !important;
}

.ui.popup {
  background-color: var(--nosco-boreal-1) !important;
  border-color: var(--nosco-boreal-3) !important;
  box-shadow: 0 8px 24px rgba(15, 26, 34, 0.4) !important;
  color: var(--nosco-dark-text) !important;
}

.ui.popup::before {
  background-color: var(--nosco-boreal-1) !important;
  border-color: var(--nosco-boreal-3) !important;
}

.toastify {
  background-color: var(--nosco-boreal-1) !important;
  color: var(--nosco-dark-text) !important;
  box-shadow: 0 8px 24px rgba(15, 26, 34, 0.4) !important;
}

.secondary-nav {
  background-color: var(--nosco-boreal-1) !important;
  border-bottom: 1px solid var(--nosco-boreal-3) !important;
}

.repo-header .flex-item-title a {
  color: var(--nosco-dark-atlantic-1) !important;
}

.repo-header .flex-item-title a:hover {
  color: var(--nosco-dark-atlantic-0) !important;
}

.fork-flag {
  background-color: var(--nosco-boreal-2) !important;
  border-top: 1px solid var(--nosco-boreal-3) !important;
  color: var(--nosco-shore-greyed-dark) !important;
}

pre,
code,
.pre-code,
.code-view {
  background-color: var(--nosco-boreal-2) !important;
  border: 1px solid var(--nosco-boreal-3) !important;
  color: var(--nosco-dark-text) !important;
  border-radius: 6px !important;
}

.lines-num {
  color: #93A3B1 !important;
  background-color: var(--nosco-boreal-1) !important;
}

.ui.label:not(.primary):not(.basic) {
  background-color: var(--nosco-boreal-2) !important;
  color: var(--nosco-dark-text) !important;
  border-radius: 6px !important;
}

.ui.label.important {
  background-color: var(--nosco-warmth-0) !important;
  color: var(--nosco-boreal-0) !important;
}

.ui.label.success,
.ui.label.green {
  background-color: #4A6F3E !important;
  color: var(--nosco-shore-0) !important;
}

.ui.label.warning,
.ui.label.yellow {
  background-color: var(--nosco-yellow) !important;
  color: var(--nosco-boreal-0) !important;
}

.ui.label.red {
  background-color: #C71820 !important;
  color: var(--nosco-shore-0) !important;
}

.breadcrumb {
  color: var(--nosco-dark-text) !important;
}

.ui.button:not(.primary):not(.negative),
.button:not(.primary):not(.negative),
button.ui.button:not(.primary):not(.negative) {
  background-color: var(--nosco-atlantic-1) !important;
  border-color: var(--nosco-atlantic-1) !important;
  color: var(--nosco-shore-0) !important;
}

.ui.button:not(.primary):not(.negative):hover,
.button:not(.primary):not(.negative):hover,
button.ui.button:not(.primary):not(.negative):hover {
  background-color: var(--nosco-atlantic-0) !important;
  border-color: var(--nosco-atlantic-0) !important;
  color: var(--nosco-shore-0) !important;
  box-shadow: 0 4px 12px rgba(43, 87, 125, 0.2) !important;
}

.ui.button.primary,
.button.primary,
button.ui.button.primary {
  background-color: var(--nosco-atlantic-0) !important;
  border-color: var(--nosco-atlantic-0) !important;
  color: var(--nosco-shore-0) !important;
}

.ui.button.primary:hover,
.button.primary:hover,
button.ui.button.primary:hover {
  background-color: var(--nosco-atlantic-1) !important;
  border-color: var(--nosco-atlantic-1) !important;
  color: var(--nosco-shore-0) !important;
  box-shadow: 0 4px 12px rgba(74, 122, 156, 0.2) !important;
}

.ui.button.negative,
.button.negative,
button.ui.button.negative {
  background-color: #C71820 !important;
  border-color: #C71820 !important;
  color: var(--nosco-shore-0) !important;
}

.ui.button.negative:hover,
.button.negative:hover,
button.ui.button.negative:hover {
  background-color: #A81319 !important;
  border-color: #A81319 !important;
  color: var(--nosco-shore-0) !important;
}

.ui.basic.button {
  background-color: transparent !important;
  border: 1px solid var(--nosco-boreal-3) !important;
  color: var(--nosco-dark-text) !important;
}

.ui.basic.button:hover {
  background-color: var(--nosco-boreal-2) !important;
  border-color: var(--nosco-atlantic-2) !important;
  color: var(--nosco-atlantic-3) !important;
}

.page-footer {
  background-color: var(--nosco-boreal-1) !important;
  border-top: 1px solid var(--nosco-boreal-3) !important;
  color: var(--nosco-granite-3) !important;
}

.page-footer .right-links a {
  color: var(--nosco-dark-atlantic-1) !important;
}

.page-footer .right-links a:hover {
  color: var(--nosco-dark-atlantic-0) !important;
}

.nosco-footer-wordmark {
  color: var(--nosco-dark-atlantic-0) !important;
}

.nosco-footer-signature {
  color: var(--nosco-shore-greyed-dark) !important;
}

::-webkit-scrollbar-thumb {
  background: var(--nosco-boreal-3);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--nosco-granite-2);
}

* {
   scrollbar-color: var(--nosco-boreal-3) transparent !important;
}

html.nosco-login-active body::before {
  background: linear-gradient(
    180deg,
    rgba(15, 26, 34, 0.5) 0%,
    rgba(15, 26, 34, 0.7) 50%,
    rgba(15, 26, 34, 0.9) 100%
  ) !important;
}

html.nosco-login-active .page-content.user.signin .ui.top.attached.header,
html.nosco-login-active .page-content.user.signin .ui.attached.segment {
  background: rgba(26, 40, 50, 0.88) !important;
  border-color: rgba(46, 64, 80, 0.4) !important;
  color: var(--nosco-dark-text) !important;
}

html.nosco-login-active .page-content.user.signin .ui.attached.segment {
  box-shadow:
    0 8px 32px rgba(15, 26, 34, 0.45),
    0 2px 8px rgba(15, 26, 34, 0.3),
    inset 0 1px 0 rgba(46, 64, 80, 0.3) !important;
}

html.nosco-login-active .page-content.user.signin .ui.top.attached.header {
  color: var(--nosco-dark-text) !important;
}

:root {
  color-scheme: dark;
  --color-body: var(--nosco-boreal-0);
  --color-box-header: var(--nosco-boreal-1);
  --color-box-body: var(--nosco-boreal-1);
  --color-box-body-highlight: var(--nosco-boreal-2);
  --color-text-dark: #F5F1EA;
  --color-text: var(--nosco-dark-text);
  --color-text-light: #C7CFD8;
  --color-text-light-1: var(--nosco-shore-greyed-dark);
  --color-text-light-2: var(--nosco-granite-4);
  --color-text-light-3: #8291A0;
  --color-footer: var(--nosco-boreal-1);
  --color-timeline: var(--nosco-boreal-3);
  --color-input-text: var(--nosco-dark-text);
  --color-input-background: var(--nosco-boreal-2);
  --color-input-toggle-background: var(--nosco-boreal-2);
  --color-input-border: var(--nosco-boreal-3);
  --color-input-border-hover: var(--nosco-atlantic-2);
  --color-header-wrapper: var(--nosco-boreal-1);
  --color-header-wrapper-transparent: #1A283200;
  --color-light: #0F1A2228;
  --color-light-border: #FFFFFF28;
  --color-light-mimic-enabled: rgba(0, 0, 0, calc(40 / 255 * 222 / 255 / var(--opacity-disabled)));
  --color-hover: rgba(106, 154, 188, 0.16);
  --color-active: rgba(106, 154, 188, 0.26);
  --color-menu: var(--nosco-boreal-1);
  --color-card: var(--nosco-boreal-1);
  --fancy-card-bg: var(--nosco-boreal-2);
  --fancy-card-border: var(--nosco-boreal-3);
  --color-markup-table-row: rgba(106, 154, 188, 0.06);
  --color-markup-code-block: var(--nosco-boreal-2);
  --color-markup-code-inline: var(--nosco-boreal-2);
  --color-button: var(--nosco-boreal-2);
  --color-code-bg: var(--nosco-boreal-1);
  --color-shadow: rgba(0, 0, 0, 0.6);
  --color-secondary-bg: var(--nosco-boreal-1);
  --color-text-focus: var(--nosco-atlantic-2);
  --color-expand-button: var(--nosco-boreal-3);
  --color-placeholder-text: #7C8B98;
  --color-editor-line-highlight: var(--nosco-boreal-1);
  --color-caret: var(--nosco-dark-text);
  --color-reaction-bg: rgba(106, 154, 188, 0.1);
  --color-reaction-active-bg: rgba(143, 182, 212, 0.22);
  --color-reaction-hover-bg: rgba(143, 182, 212, 0.32);
  --color-tooltip-text: var(--nosco-dark-text);
  --color-tooltip-bg: var(--nosco-boreal-2);
  --color-nav-bg: var(--nosco-boreal-1);
  --color-nav-hover-bg: var(--nosco-boreal-3);
  --color-secondary-nav-bg: var(--nosco-boreal-0);
  --color-label-text: var(--nosco-dark-text);
  --color-label-bg: rgba(106, 154, 188, 0.18);
  --color-label-hover-bg: rgba(106, 154, 188, 0.26);
  --color-label-active-bg: rgba(106, 154, 188, 0.34);
  --color-label-bg-alt: rgba(106, 154, 188, 0.22);
  --color-accent: var(--nosco-atlantic-3);
  --color-small-accent: var(--nosco-atlantic-3);
  --color-highlight-fg: #D9E6F0;
  --color-highlight-bg: rgba(106, 154, 188, 0.25);
  --color-overlay-backdrop: rgba(0, 0, 0, 0.7);
  --color-selection-bg: rgba(201, 123, 74, 0.3);
  --color-selection-fg: var(--nosco-dark-text);
  --checkerboard-color-1: var(--nosco-boreal-1);
  --checkerboard-color-2: var(--nosco-boreal-3);
  --color-project-board-bg: var(--nosco-boreal-1);
  --color-project-board-dark-label: var(--nosco-granite-4);
  --color-gold: var(--nosco-warmth-3);

  /* primary — Atlantic lifted for night */
  --color-primary: #8FB6D4;
  --color-primary-contrast: var(--nosco-boreal-0);
  --color-primary-dark-1: #6A9ABC;
  --color-primary-dark-2: #4A7A9C;
  --color-primary-dark-3: #2B577D;
  --color-primary-dark-4: #2B577D;
  --color-primary-dark-5: #2B577D;
  --color-primary-dark-6: #2B577D;
  --color-primary-dark-7: #2B577D;
  --color-primary-light-1: #A8C6DE;
  --color-primary-light-2: #BFD6E8;
  --color-primary-light-3: #D9E6F0;
  --color-primary-light-4: #E3EDF6;
  --color-primary-light-5: #EAF2F9;
  --color-primary-light-6: #F2F8FC;
  --color-primary-light-7: #F8FBFE;
  --color-primary-alpha-10: #8FB6D419;
  --color-primary-alpha-20: #8FB6D433;
  --color-primary-alpha-30: #8FB6D44b;
  --color-primary-alpha-40: #8FB6D466;
  --color-primary-alpha-50: #8FB6D480;
  --color-primary-alpha-60: #8FB6D499;
  --color-primary-alpha-70: #8FB6D4b3;
  --color-primary-alpha-80: #8FB6D4cc;
  --color-primary-alpha-90: #8FB6D4e1;
  --color-primary-hover: #A8C6DE;
  --color-primary-active: #BFD6E8;

  /* secondary — Boreal scale */
  --color-secondary: var(--nosco-boreal-2);
  --color-secondary-dark-1: #243440;
  --color-secondary-dark-2: #2E4050;
  --color-secondary-dark-3: #2E4050;
  --color-secondary-dark-4: #3A5062;
  --color-secondary-dark-5: #3A5062;
  --color-secondary-dark-6: #475C70;
  --color-secondary-dark-7: #475C70;
  --color-secondary-dark-8: #54687E;
  --color-secondary-dark-9: #54687E;
  --color-secondary-dark-10: #62758A;
  --color-secondary-dark-11: #62758A;
  --color-secondary-dark-12: #718297;
  --color-secondary-dark-13: #718297;
  --color-secondary-light-1: #243440;
  --color-secondary-light-2: #1A2832;
  --color-secondary-light-3: #1A2832;
  --color-secondary-light-4: #0F1A22;
  --color-secondary-alpha-10: #24344019;
  --color-secondary-alpha-20: #24344033;
  --color-secondary-alpha-30: #2434404b;
  --color-secondary-alpha-40: #24344066;
  --color-secondary-alpha-50: #24344080;
  --color-secondary-alpha-60: #24344099;
  --color-secondary-alpha-70: #243440b3;
  --color-secondary-alpha-80: #243440cc;
  --color-secondary-alpha-90: #243440e1;

  /* status messages — night inks, per playbook §12 */
  --color-info-bg: rgba(106, 154, 188, 0.14);
  --color-info-border: rgba(143, 182, 212, 0.35);
  --color-info-text: #8FB6D4;
  --color-success-bg: rgba(143, 174, 165, 0.14);
  --color-success-border: rgba(143, 174, 165, 0.35);
  --color-success-text: #8FAEA5;
  --color-warning-bg: rgba(234, 168, 83, 0.12);
  --color-warning-border: rgba(234, 168, 83, 0.35);
  --color-warning-text: #EAA853;
  --color-error-bg: rgba(208, 138, 138, 0.14);
  --color-error-bg-active: rgba(208, 138, 138, 0.25);
  --color-error-bg-hover: rgba(208, 138, 138, 0.2);
  --color-error-border: rgba(208, 138, 138, 0.35);
  --color-error-text: #D08A8A;

  /* diffs — night sage & night brick */
  --color-diff-added-row-bg: rgba(143, 174, 165, 0.14);
  --color-diff-added-row-border: rgba(143, 174, 165, 0.4);
  --color-diff-added-word-bg: rgba(143, 174, 165, 0.3);
  --color-diff-removed-row-bg: rgba(208, 138, 138, 0.13);
  --color-diff-removed-row-border: rgba(208, 138, 138, 0.35);
  --color-diff-removed-word-bg: rgba(208, 138, 138, 0.28);
  --color-diff-moved-row-bg: rgba(106, 154, 188, 0.14);
  --color-diff-moved-row-border: rgba(106, 154, 188, 0.35);
  --color-diff-inactive: var(--nosco-boreal-2);
}

.chroma .c,
.chroma .ch,
.chroma .cm,
.chroma .c1,
.chroma .cs {
  color: #93A3B1; font-style: italic;
}

.chroma .cp,
.chroma .cpf { color: var(--nosco-dark-pencil); }

.chroma .k,
.chroma .kc,
.chroma .kd,
.chroma .kn,
.chroma .kp,
.chroma .kr {
  color: var(--nosco-dark-atlantic-1); font-weight: 600;
}

.chroma .kt { color: var(--nosco-dark-pencil); }

.chroma .s,
.chroma .sa,
.chroma .sb,
.chroma .sc,
.chroma .dl,
.chroma .sd,
.chroma .s1,
.chroma .s2,
.chroma .sh,
.chroma .si,
.chroma .sr,
.chroma .ss,
.chroma .sx { color: var(--nosco-dark-sage); }

.chroma .se { color: var(--nosco-dark-warmth-deep); }

.chroma .m,
.chroma .mb,
.chroma .mf,
.chroma .mh,
.chroma .mi,
.chroma .il,
.chroma .mo { color: var(--nosco-dark-warmth-deep); }

.chroma .nd,
.chroma .nl { color: var(--nosco-dark-warmth-deep); }

.chroma .na { color: #7AA6C6; }

.chroma .nb,
.chroma .bp { color: var(--nosco-dark-pencil); }

.chroma .nc,
.chroma .ne,
.chroma .nn { color: var(--nosco-dark-atlantic-0); }

.chroma .nf,
.chroma .fm {
  color: var(--nosco-dark-atlantic-0); font-weight: 600;
}

.chroma .nt {
  color: var(--nosco-dark-atlantic-1); font-weight: 600;
}

.chroma .o,
.chroma .ow { color: #C7CFD8; }

.chroma .p { color: var(--nosco-shore-greyed-dark); }

.chroma .gh {
  color: var(--nosco-dark-atlantic-0); font-weight: 700;
}

.chroma .gu,
.chroma .go { color: #93A3B1; }

.chroma .gp { color: var(--nosco-atlantic-3); }

.chroma .gr,
.chroma .gt,
.chroma .err { color: var(--nosco-dark-alert); }

.chroma .gi {
  background-color: rgba(143, 174, 165, 0.16);
}

.chroma .gd {
  background-color: rgba(208, 138, 138, 0.16);
}
}