/*
 * AIA GitLab · Horizon Calm Theme v5.3
 * ═════════════════════════════════════════════════════════════════════════════
 * Production CSS for GitLab CE 18.9.x · dark mode
 *
 * v5.0 — RETOKENISED to the CURRENT handbook palette
 *        (aia-website/DESIGN_SYSTEM.md §2 "Horizon Calm"):
 *
 *          sage teal       #5BA4A4    (was v3 mint #4ECDC4)
 *          warm amber      #C8A86C    (was v3 amber #C99A5C)
 *          warm charcoal   #1A1A1A    (was v3 deep-charcoal #06060B)
 *          warm off-white  #E8E6E1    (was v3 cool #F2F2F5)
 *          Inter, JetBrains Mono   (was Sora)
 *
 *        v5.0 also DIALS DOWN accent application per handbook §3
 *        ("the gradient is a signature element — use it with restraint"):
 *        link/filename colour defaults to text, accent reveals on hover;
 *        gradient top-border on file viewer removed; markdown h3 calmed;
 *        card hover becomes a neutral lift, not a teal flood.
 *
 * v5.1 — DE-TEAL cleanup: repointed the last literal #5BA4A4/#7DB5B5 token
 *        leaks (control focus/selected, feedback-info, data-viz-aqua,
 *        theme-indigo, h1 underline, progress bar) to calm/semantic values.
 *        Teal now renders ONLY on the apex animated gradient pill.
 *
 * v5.2 — LIGHT MODE added (§36): full 'sunset sky' light scope on
 *        :root:not(.gl-dark) — cream surfaces, ink text, sky↔sunset accents,
 *        sky→sunset gradient reserved for the pill. Same de-accent discipline
 *        as dark. Ported from aia-website aia-v6.css light block.
 *
 * v5.3 — sidebar fidelity: neutralise GitLab ui-* nav-theme body wash
 *        (background-IMAGE, not just colour — 'Red' painted a red/brown
 *        radial over the page); nav-item hover/active highlights are now
 *        pill-shaped (house shape §5) on the GitLab 18.9 .super-sidebar-
 *        nav-item markup, not GitLab's 6-8px square.
 *
 * Sources of truth (in priority order):
 *   1. aia-website/DESIGN_SYSTEM.md §1–§11 (canonical handbook)
 *   2. aia-website/assets/css/aia.css      (live :root tokens, dark)
 *   3. aia-website/assets/css/aia-v6.css   (live light-mode block — N/A
 *      here: GitLab serves a single dark theme; we do not mirror light)
 *
 * Architecture:
 *   Overrides GitLab's Pajamas design tokens at :root.gl-dark — the deepest
 *   integration point — so every component (buttons, badges, cards, alerts,
 *   nav, breadcrumbs, tabs, dropdowns, CI icons) inherits Horizon Calm
 *   without per-component rules. Component-level overrides only where
 *   Pajamas tokens are insufficient or where the calm-down deltas require
 *   reaching beyond the token layer.
 *
 * Palette quick-reference (from handbook §2 — DO NOT EDIT IN PLACE; if
 * the website palette changes, update both files in the same commit):
 *
 *   Surfaces (warm charcoal ramp, §2.1)
 *     --aia-bg      #1A1A1A     page background (handbook --bg)
 *     --aia-s1      #1E1E1E     inset code blocks                 (--s1)
 *     --aia-s2      #242424     cards, buttons base               (--s2)
 *     --aia-s3      #2A2A2A     hover surfaces                    (--s3)
 *     --aia-s4      #2D2D2D     higher panels                     (--s4)
 *     --aia-s5      #333333     highest elevation                 (--s5)
 *   Text tiers (§2.2)
 *     --aia-t1      #E8E6E1     primary                           (--t1)
 *     --aia-t2      #D4D2CD     body / lead                       (--t2)
 *     --aia-t3      #A8A6A1     secondary / captions              (--t3)
 *     --aia-t4      #6B6B66     muted / disabled                  (--t4)
 *     --aia-t5      #565652     faintest hairline                 (--t5)
 *   Accents (§2.3)
 *     --aia-ac      #5BA4A4     sage teal — primary accent        (--ac)
 *     --aia-ac-d    #4A8A8A     hover/focus on light, borders     (--ac-d)
 *     --aia-ac-h    #7DB5B5     highlights, gradient mid-stop     (--ac-h)
 *     --aia-ac-rgb  91,164,164  for rgba() composition            (--ac-rgb)
 *     --aia-gd      #C8A86C     warm amber — secondary accent     (--gd)
 *     --aia-gd-d    #B89656     amber dark                        (--gd-d)
 *     --aia-gd-h    #D4BC84     amber light / gradient highlight  (--gd-h)
 *     --aia-gd-rgb  200,168,108 for rgba() composition            (--gd-rgb)
 *   Supporting / semantic (§2 supporting)
 *     --aia-bl      #7B9EB8     steel blue · info
 *     --aia-gn      #7DB87D     warm green · success
 *     --aia-rd      #C66B6B     muted coral · error
 *     --aia-pr      #9B8EC0     soft violet · keywords
 */

@import url('https://fonts.bunny.net/css?family=inter:300,400,500,600,700,800|jetbrains-mono:400,500&display=swap');


/* ═════════════════════════════════════════════════════════════════════════════
   §1  PAJAMAS DESIGN TOKENS — Horizon Calm remap on :root.gl-dark
   Overrides the semantic colour scale at the deepest level so ALL GitLab
   components (buttons, badges, alerts, cards, controls, headings, avatars,
   CI icons, navigation, breadcrumbs, tabs, dropdowns) inherit the palette.
   ════════════════════════════════════════════════════════════════════════════ */

:root.gl-dark,
.gl-dark,
.gl-dark-scope {

  /* ── §1.1  Neutral scale — warm-charcoal ramp ─────────────────────────
     0 darkest (page bg) → 950 lightest (primary text).
     Mapped to handbook §2.1 surfaces + §2.2 text tiers.
     ──────────────────────────────────────────────────────────────────── */
  --gl-color-neutral-0:    #FAFAF7;   /* light-mode fallback, unused in dark */
  --gl-color-neutral-10:   #F0EEE9;
  --gl-color-neutral-50:   #E8E6E1;   /* = --t1 primary text */
  --gl-color-neutral-100:  #D4D2CD;   /* = --t2 body / lead */
  --gl-color-neutral-200:  #A8A6A1;   /* = --t3 captions */
  --gl-color-neutral-300:  #6B6B66;   /* = --t4 muted */
  --gl-color-neutral-400:  #565652;   /* = --t5 faintest hairline */
  --gl-color-neutral-500:  #444444;   /* between t5 and surfaces */
  --gl-color-neutral-600:  #3A3A3A;
  --gl-color-neutral-700:  #333333;   /* = --s5 highest elevation */
  --gl-color-neutral-800:  #2A2A2A;   /* = --s3 hover surfaces */
  --gl-color-neutral-900:  #242424;   /* = --s2 cards */
  --gl-color-neutral-950:  #1A1A1A;   /* = --bg page background */
  --gl-color-neutral-1000: #141414;   /* below page bg */

  /* ── §1.2  Blue → warm monochrome grays (calm: accent reserved for the
     apex gradient button only — handbook §3 restraint, not a teal flood) ── */
  --gl-color-blue-50:  rgba(232, 230, 225, 0.05);
  --gl-color-blue-100: rgba(232, 230, 225, 0.10);
  --gl-color-blue-200: rgba(232, 230, 225, 0.16);
  --gl-color-blue-300: #6B6B66;   /* = --t4 */
  --gl-color-blue-400: #8F8F88;
  --gl-color-blue-500: #BFBDB6;   /* mid warm-gray (was teal --ac) */
  --gl-color-blue-600: #D4D2CD;   /* = --t2 */
  --gl-color-blue-700: #E8E6E1;   /* = --t1 */
  --gl-color-blue-800: #EFEDE8;
  --gl-color-blue-900: #F4F2EE;
  --gl-color-blue-950: #FAFAF7;

  /* ── §1.3  Green → warm sage (handbook --gn #7DB87D) ───────────────── */
  --gl-color-green-50:  rgba(125, 184, 125, 0.06);
  --gl-color-green-100: rgba(125, 184, 125, 0.12);
  --gl-color-green-200: rgba(125, 184, 125, 0.20);
  --gl-color-green-300: #4F7A4F;
  --gl-color-green-400: #629962;
  --gl-color-green-500: #7DB87D;   /* = --gn */
  --gl-color-green-600: #9CCA9C;
  --gl-color-green-700: #B6D9B6;
  --gl-color-green-800: #CFE6CF;
  --gl-color-green-900: #E3F0E3;
  --gl-color-green-950: #EFF7EF;

  /* ── §1.4  Orange → warm amber — handbook --gd #C8A86C ─────────────── */
  --gl-color-orange-50:  rgba(200, 168, 108, 0.06);
  --gl-color-orange-100: rgba(200, 168, 108, 0.12);
  --gl-color-orange-200: rgba(200, 168, 108, 0.20);
  --gl-color-orange-300: #8A7548;
  --gl-color-orange-400: #B89656;   /* = --gd-d */
  --gl-color-orange-500: #C8A86C;   /* = --gd PRIMARY */
  --gl-color-orange-600: #D4BC84;   /* = --gd-h */
  --gl-color-orange-700: #DDC99B;
  --gl-color-orange-800: #E6D5B3;
  --gl-color-orange-900: #EFE2CB;
  --gl-color-orange-950: #F6EFDF;

  /* ── §1.5  Red → muted coral — handbook --rd #C66B6B ───────────────── */
  --gl-color-red-50:  rgba(198, 107, 107, 0.06);
  --gl-color-red-100: rgba(198, 107, 107, 0.12);
  --gl-color-red-200: rgba(198, 107, 107, 0.20);
  --gl-color-red-300: #8F4040;
  --gl-color-red-400: #A85858;
  --gl-color-red-500: #C66B6B;   /* = --rd */
  --gl-color-red-600: #D08585;
  --gl-color-red-700: #DBA0A0;
  --gl-color-red-800: #E5B9B9;
  --gl-color-red-900: #EFD3D3;
  --gl-color-red-950: #F6E5E5;

  /* ── §1.6  Purple → soft violet — handbook --pr #9B8EC0 ────────────── */
  --gl-color-purple-50:  rgba(155, 142, 192, 0.06);
  --gl-color-purple-100: rgba(155, 142, 192, 0.12);
  --gl-color-purple-200: rgba(155, 142, 192, 0.20);
  --gl-color-purple-300: #5C5183;
  --gl-color-purple-400: #7E6FAA;
  --gl-color-purple-500: #9B8EC0;   /* = --pr */
  --gl-color-purple-600: #ADA5C9;
  --gl-color-purple-700: #BEB8D3;
  --gl-color-purple-800: #CECADC;
  --gl-color-purple-900: #DEDDE6;
  --gl-color-purple-950: #EBEAEF;

  /* ── §1.7  Alpha channels (overlays, scrims) ──────────────────────── */
  --gl-color-alpha-dark-2:  rgba(26, 26, 26, 0.02);
  --gl-color-alpha-dark-4:  rgba(26, 26, 26, 0.04);
  --gl-color-alpha-dark-6:  rgba(26, 26, 26, 0.06);
  --gl-color-alpha-dark-8:  rgba(26, 26, 26, 0.08);
  --gl-color-alpha-dark-16: rgba(26, 26, 26, 0.16);
  --gl-color-alpha-dark-24: rgba(26, 26, 26, 0.24);
  --gl-color-alpha-dark-40: rgba(26, 26, 26, 0.40);
  --gl-color-alpha-light-2:  rgba(232, 230, 225, 0.02);
  --gl-color-alpha-light-4:  rgba(232, 230, 225, 0.04);
  --gl-color-alpha-light-6:  rgba(232, 230, 225, 0.06);
  --gl-color-alpha-light-8:  rgba(232, 230, 225, 0.08);
  --gl-color-alpha-light-16: rgba(232, 230, 225, 0.16);
  --gl-color-alpha-light-24: rgba(232, 230, 225, 0.24);
  --gl-color-alpha-light-36: rgba(232, 230, 225, 0.36);

  /* ── §1.8  Data viz — handbook semantic palette ───────────────────── */
  --data-viz-aqua-500:    #6B8896;   /* de-teal: muted slate data series */
  --data-viz-aqua-600:    #88A3B0;
  --data-viz-aqua-700:    #A6BCC6;
  --data-viz-blue-500:    #7B9EB8;   /* = --bl */
  --data-viz-green-500:   #7DB87D;   /* = --gn */
  --data-viz-orange-500:  #C8A86C;   /* = --gd */
  --data-viz-magenta-500: #C66B6B;   /* = --rd */

  /* ── §1.9  Theme indigo scale → sage nav family ───────────────────── */
  --theme-indigo-10:  #1A1A1A;
  --theme-indigo-50:  #1E1E1E;
  --theme-indigo-100: #242424;
  --theme-indigo-200: #2A2A2A;
  --theme-indigo-300: #2D2D2D;
  --theme-indigo-400: #6B6B66;
  --theme-indigo-500: #8F8F88;
  --theme-indigo-600: #BFBDB6;
  --theme-indigo-700: #D4D2CD;
  --theme-indigo-800: #E8E6E1;
  --theme-indigo-900: #F0EEE9;
  --theme-indigo-950: #FAFAF7;

  /* ── §1.10  Semantic background tokens ────────────────────────────── */
  --gl-background-color-default: #1A1A1A;
  --gl-background-color-subtle:  #1E1E1E;
  --gl-background-color-strong:  #2A2A2A;
  --gl-background-color-section: #242424;
  --gl-background-color-overlap: #2D2D2D;

  /* ── §1.11  Semantic border tokens ────────────────────────────────── */
  --gl-border-color-default: #3A3A3A;
  --gl-border-color-subtle:  #2A2A2A;
  --gl-border-color-section: #444444;
  --gl-border-color-strong:  #505050;

  /* ── §1.12  Semantic text tokens ──────────────────────────────────── */
  --gl-text-color-default:  #E8E6E1;
  --gl-text-color-subtle:   #A8A6A1;
  --gl-text-color-strong:   #F0EEE9;
  --gl-text-color-disabled: #565652;
  --gl-text-color-link:     #E8E6E1;   /* neutral; affordance via weight + hover underline */
  --gl-text-color-heading:  #E8E6E1;

  /* ── §1.13  Focus ring — sage teal at low alpha (calm) ────────────── */
  --gl-focus-ring-inner-color: #1A1A1A;
  --gl-focus-ring-outer-color: rgba(168, 166, 161, 0.50);

  /* ── §1.14  Control tokens (forms, inputs) ────────────────────────── */
  --gl-control-background-color-default:        #2D2D2D;
  --gl-control-border-color-default:            #505050;
  --gl-control-border-color-hover:              #6B6B66;
  --gl-control-border-color-focus:              #A8A6A1;
  --gl-control-border-color-selected-default:   #E8E6E1;

  /* ── §1.15  Feedback tokens (alerts) ──────────────────────────────── */
  --gl-feedback-info-background-color:    rgba(123, 158, 184, 0.10);
  --gl-feedback-info-text-color:          #9CB6CE;
  --gl-feedback-info-icon-color:          #7B9EB8;
  --gl-feedback-success-background-color: rgba(125, 184, 125, 0.08);
  --gl-feedback-success-text-color:       #9CCA9C;
  --gl-feedback-warning-background-color: rgba(200, 168, 108, 0.08);
  --gl-feedback-warning-text-color:       #D4BC84;
  --gl-feedback-danger-background-color:  rgba(198, 107, 107, 0.08);
  --gl-feedback-danger-text-color:        #D08585;

  /* ── §1.16  CI/CD icon tokens ─────────────────────────────────────── */
  --ci-icon-success-background-color: rgba(125, 184, 125, 0.15);
  --ci-icon-success-text-color:       #7DB87D;
  --ci-icon-success-icon-color:       #7DB87D;
  --ci-icon-warning-background-color: rgba(200, 168, 108, 0.15);
  --ci-icon-warning-text-color:       #C8A86C;
  --ci-icon-warning-icon-color:       #C8A86C;

  /* ── §1.17  AIA custom tokens (handbook §2) ───────────────────────── */
  --aia-bg:        #1A1A1A;
  --aia-s1:        #1E1E1E;
  --aia-s2:        #242424;
  --aia-s3:        #2A2A2A;
  --aia-s4:        #2D2D2D;
  --aia-s5:        #333333;
  --aia-t1:        #E8E6E1;
  --aia-t2:        #D4D2CD;
  --aia-t3:        #A8A6A1;
  --aia-t4:        #6B6B66;
  --aia-t5:        #565652;
  /* Accent re-pointed to warm grays: the brand teal is RESERVED for the apex
     gradient button only (handbook §3 restraint). All other --aia-ac uses
     (nav, icons, active states, accents) now read as calm monochrome. */
  --aia-ac:        #C5C3BC;   /* was teal #5BA4A4 → mid warm-gray */
  --aia-ac-d:      #A8A6A1;   /* = --t3 */
  --aia-ac-h:      #E8E6E1;   /* = --t1 (brighter on hover) */
  --aia-ac-rgb:    197, 195, 188;
  --aia-gd:        #C8A86C;
  --aia-gd-d:      #B89656;
  --aia-gd-h:      #D4BC84;
  --aia-gd-rgb:    200, 168, 108;
  --aia-rd:        #C66B6B;
  --aia-gn:        #7DB87D;
  --aia-bl:        #7B9EB8;
  --aia-pr:        #9B8EC0;
  --aia-bd:        rgba(232, 230, 225, 0.045);
  --aia-bd2:       rgba(232, 230, 225, 0.085);
  --aia-bd3:       rgba(232, 230, 225, 0.13);
  --aia-bd-ac:     rgba(232, 230, 225, 0.13);
  --aia-bd-gd:     rgba(200, 168, 108, 0.25);
  --aia-radius-xs: 4px;
  --aia-radius-s:  6px;
  --aia-radius:    10px;
  --aia-radius-l:  16px;
  --aia-radius-xl: 24px;
  --aia-radius-pill: 999px;
  --aia-ease:      cubic-bezier(0.16, 1, 0.3, 1);
  --aia-ease-io:   cubic-bezier(0.4, 0, 0.2, 1);
  --aia-transition:       all 180ms cubic-bezier(0.4, 0, 0.2, 1);
  --aia-transition-fast:  all 120ms cubic-bezier(0.4, 0, 0.2, 1);
  --aia-transition-slow:  all 350ms cubic-bezier(0.16, 1, 0.3, 1);
  --aia-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --aia-shadow-md: 0 4px 8px rgba(0, 0, 0, 0.4), 0 2px 4px rgba(0, 0, 0, 0.3);
  --aia-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5), 0 4px 8px rgba(0, 0, 0, 0.3);
  --aia-grad:      linear-gradient(135deg, #5BA4A4 0%, #C8A86C 100%);
  --aia-grad-tx:   linear-gradient(135deg, #7DB5B5 0%, #D4BC84 100%);
  --aia-glow-ac:   0 0 24px rgba(232, 230, 225, 0.10);
  --aia-glow-gd:   0 0 32px rgba(200, 168, 108, 0.16);
}


/* ═════════════════════════════════════════════════════════════════════════════
   §2  TYPOGRAPHY — Inter + JetBrains Mono (handbook §4)
   "Inter is the single typeface for UI and content. Monospace (JetBrains Mono)
    is reserved only for genuine code / CLI."
   ════════════════════════════════════════════════════════════════════════════ */

body,
body.gl-dark,
.gl-font-sans {
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: -0.006em;   /* Inter ships well-spaced; only a hair tighter */
  font-feature-settings: 'cv11', 'ss01', 'ss03';  /* Inter stylistic sets for cleaner numerals */
}

code,
pre,
.gl-font-monospace,
.file-content code,
.blob-viewer pre,
.editor-lite .monaco-editor {
  font-family: 'JetBrains Mono', 'SF Mono', 'Fira Code', ui-monospace, SFMono-Regular, monospace !important;
  font-feature-settings: 'liga' 1, 'calt' 1;
}

/* Eyebrow / uppercase label rhythm — handbook §4 "Eyebrows are uppercase Inter
   with letter-spacing: 0.18em (--tr-eyebrow)" */
.gl-eyebrow,
.upcase,
[data-eyebrow="true"] {
  text-transform: uppercase !important;
  letter-spacing: 0.18em !important;
  font-weight: 600 !important;
  font-size: 0.7rem !important;
  color: var(--aia-ac) !important;
}


/* ═════════════════════════════════════════════════════════════════════════════
   §3  SYSTEM HEADER / FOOTER STRIP — appearance-API message bands
   The `header-message` / `footer-message` elements set via the admin
   Appearance API. Handbook §2.1 surface + §2.2 text-1.
   ════════════════════════════════════════════════════════════════════════════ */

.header-message,
.footer-message {
  background: var(--aia-bg) !important;
  border-top:    1px solid var(--aia-bd) !important;
  border-bottom: 1px solid var(--aia-bd) !important;
  color: var(--aia-t1) !important;
  font-weight: 500 !important;
  font-size: 0.75rem !important;
  letter-spacing: 0.04em !important;
  text-transform: none !important;
}

.header-message a,
.footer-message a {
  color: var(--aia-ac) !important;
  text-decoration: none !important;
}

.header-message a:hover,
.footer-message a:hover {
  color: var(--aia-ac-h) !important;
}


/* ═════════════════════════════════════════════════════════════════════════════
   §4  TOP BAR / NAVBAR — Seamless dark
   ════════════════════════════════════════════════════════════════════════════ */

.top-bar-fixed,
.top-bar-container,
header.super-topbar,
.navbar-gitlab {
  background: var(--aia-bg) !important;
  border-bottom: 1px solid var(--aia-bd) !important;
}

/* Search — pill (§5 house shape) with subtle sage focus */
.global-search-container input,
.search-input-container input,
[data-testid="global-search-input"] {
  background: var(--aia-s2) !important;
  border: 1px solid var(--aia-bd2) !important;
  border-radius: var(--aia-radius-pill) !important;
  color: var(--aia-t2) !important;
  transition: var(--aia-transition) !important;
}

.global-search-container input:focus,
[data-testid="global-search-input"]:focus {
  border-color: rgba(var(--aia-ac-rgb), 0.5) !important;
  box-shadow: 0 0 0 3px rgba(var(--aia-ac-rgb), 0.12) !important;
  color: var(--aia-t1) !important;
}

.global-search-container input::placeholder {
  color: var(--aia-t4) !important;
}


/* ═════════════════════════════════════════════════════════════════════════════
   §5  SIDEBAR — Deep charcoal, calm hover/active
   Calm-down delta vs v4: no teal flood on inactive links — neutral muted
   text by default, sage only on hover/active.
   ════════════════════════════════════════════════════════════════════════════ */

.super-sidebar,
aside.super-sidebar,
[data-testid="super-sidebar"],
aside[class*="sidebar"],
.project-page-sidebar,
.group-page-sidebar {
  background: var(--aia-s1) !important;
  border-right: 1px solid var(--aia-bd) !important;
}

.super-sidebar a,
.super-sidebar .nav-item-name,
aside[class*="sidebar"] a {
  color: var(--aia-t3) !important;
  transition: var(--aia-transition-fast) !important;
}

.super-sidebar a:hover,
.super-sidebar .super-sidebar-nav-item:hover,
aside[class*="sidebar"] a:hover {
  color: var(--aia-ac-h) !important;
  background: rgba(var(--aia-ac-rgb), 0.06) !important;
  border-radius: var(--aia-radius-pill) !important;   /* pill highlight (§5 house shape) */
}

.super-sidebar .active > a,
.super-sidebar [aria-current="page"],
.super-sidebar .super-sidebar-nav-item[aria-current="page"],
.super-sidebar .router-link-active,
aside [aria-current="page"] {
  color: var(--aia-ac) !important;
  background: rgba(var(--aia-ac-rgb), 0.12) !important;
  border-radius: var(--aia-radius-pill) !important;   /* pill highlight (§5 house shape) */
}

.super-sidebar svg,
aside[class*="sidebar"] svg {
  opacity: 0.55;
  transition: opacity 180ms ease;
}

.super-sidebar a:hover svg,
.super-sidebar .active svg,
aside[class*="sidebar"] a:hover svg {
  opacity: 1;
  color: var(--aia-ac) !important;
}

.super-sidebar [class*="bottom"],
.super-sidebar [class*="footer"] {
  border-top: 1px solid var(--aia-bd) !important;
}


/* ═════════════════════════════════════════════════════════════════════════════
   §6  LINKS — Sage accent, restrained
   Calm-down delta vs v4: hover underline thinner; no decoration colour shift.
   ════════════════════════════════════════════════════════════════════════════ */

a:not(.btn):not([class*="badge"]):not(.super-sidebar a),
.gl-link {
  color: var(--aia-ac) !important;
  transition: color 150ms ease !important;
  text-decoration: none !important;
}

a:not(.btn):not([class*="badge"]):not(.super-sidebar a):hover,
.gl-link:hover {
  color: var(--aia-ac-h) !important;
  text-decoration: underline !important;
  text-underline-offset: 3px !important;
  text-decoration-thickness: 1px !important;
  text-decoration-color: rgba(var(--aia-ac-rgb), 0.35) !important;
}


/* ═════════════════════════════════════════════════════════════════════════════
   §7  BUTTONS — Pill primary (handbook §5 "pill is the house shape")
   Primary keeps the static sage fill — handbook §5.1 buttonGradientWave is
   intentionally NOT ported (overkill on GitLab density per §13.4).
   ════════════════════════════════════════════════════════════════════════════ */

/* Primary / Confirm — the AIA signature animated gradient pill (handbook §5.1).
   The ONE place the brand gradient appears in GitLab; everything else is calm
   monochrome (§1.2). Ported buttonGradientWave with the exact site formula. */
@keyframes aiaButtonWave { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} }
.btn-confirm,
.btn-primary,
.gl-button.btn-confirm,
[class*="btn-confirm"]:not([class*="secondary"]):not([class*="tertiary"]) {
  background: linear-gradient(93deg, #5BA4A4 0%, rgba(200,168,108,0.88) 45%, #5BA4A4 100%) !important;
  background-size: 250% 150% !important;
  animation: aiaButtonWave 10s cubic-bezier(0.4,0,0.6,1) infinite;
  border: none !important;
  border-radius: var(--aia-radius-pill) !important;
  color: #1A1A1A !important;
  font-weight: 700 !important;
  letter-spacing: 0.01em !important;
  box-shadow: 0 4px 16px rgba(91,164,164, 0.28) !important;
  transition: transform 180ms var(--aia-ease), box-shadow 180ms var(--aia-ease) !important;
}
.btn-confirm:hover,
.btn-primary:hover,
.gl-button.btn-confirm:hover {
  background: linear-gradient(93deg, var(--aia-gd) 0%, rgba(91,164,164,0.95) 55%, var(--aia-gd) 100%) !important;
  animation-duration: 6s;
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(200,168,108, 0.34) !important;
}
.btn-confirm:active,
.btn-primary:active { transform: scale(0.97); }
@media (prefers-reduced-motion: reduce) {
  .btn-confirm, .btn-primary, .gl-button.btn-confirm { animation: none !important; }
}

/* Secondary / Default — ghost pill */
.btn-default,
.gl-button.btn-default,
.btn-secondary {
  background: transparent !important;
  border: 1px solid var(--aia-bd3) !important;
  border-radius: var(--aia-radius-pill) !important;
  color: var(--aia-t1) !important;
  transition: var(--aia-transition) !important;
}

.btn-default:hover,
.gl-button.btn-default:hover {
  background: rgba(var(--aia-ac-rgb), 0.06) !important;
  border-color: var(--aia-ac) !important;
  color: var(--aia-ac-h) !important;
}

/* Danger — pill, coral */
.btn-danger,
.gl-button.btn-danger {
  background: var(--aia-rd) !important;
  border-color: var(--aia-rd) !important;
  color: var(--aia-bg) !important;
  border-radius: var(--aia-radius-pill) !important;
  font-weight: 600 !important;
}

.btn-danger:hover {
  background: #D08585 !important;
  border-color: #D08585 !important;
}


/* ═════════════════════════════════════════════════════════════════════════════
   §8  CARDS & PANELS — Surface s2 with subtle border
   Calm-down delta vs v4: hover lift is neutral (no teal flood); cards
   inherit the §2.3c soft-panel role for raised content.
   ════════════════════════════════════════════════════════════════════════════ */

.card,
.gl-card,
[class*="card-body"],
.home-panel-metadata,
.dashboard-card,
.issuable-list > li {
  background: var(--aia-s2) !important;
  border: 1px solid var(--aia-bd) !important;
  border-radius: var(--aia-radius) !important;
  transition: var(--aia-transition) !important;
}

.card:hover,
.gl-card:hover,
.issuable-list > li:hover {
  border-color: var(--aia-bd2) !important;
  background: var(--aia-s3) !important;
  box-shadow: var(--aia-shadow-sm) !important;
}


/* ═════════════════════════════════════════════════════════════════════════════
   §9  FILE TREE / REPOSITORY — Restrained, readable
   Calm-down delta vs v4: filenames in --t1 (not teal flood); teal reveals
   on hover. Row hover neutral. Column headers eyebrow style (§4).
   ════════════════════════════════════════════════════════════════════════════ */

.tree-item,
[data-testid="file-tree-table"] tr,
.file-row,
table.tree-table tr {
  border-bottom: 1px solid var(--aia-bd) !important;
  transition: background 120ms ease !important;
}

.tree-item:hover,
[data-testid="file-tree-table"] tr:hover,
.file-row:hover,
table.tree-table tr:hover {
  background: var(--aia-s2) !important;
}

/* Filenames — primary text by default, sage on hover */
.tree-item a,
.file-row a,
[data-testid="file-tree-table"] a {
  color: var(--aia-t1) !important;
  font-weight: 500 !important;
}

.tree-item a:hover,
.file-row a:hover {
  color: var(--aia-ac-h) !important;
}

/* Commit messages in tree rows — muted */
.tree-item .str-truncated,
.tree-item .tree-commit,
[data-testid="file-tree-table"] td:nth-child(2) {
  color: var(--aia-t3) !important;
}

/* Column headers — eyebrow (handbook §4) */
.tree-item-file-name,
[data-testid="file-tree-table"] th {
  color: var(--aia-t4) !important;
  font-size: 0.7rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.18em !important;
  font-weight: 600 !important;
}


/* ═════════════════════════════════════════════════════════════════════════════
   §10  CODE BLOCKS — Surface s1, hairline border
   Calm-down delta vs v4: removed the gradient `border-image` top accent on
   .file-holder — handbook §3 says gradient with RESTRAINT (headline accent
   word, primary button, hero glows). A file viewer is none of those.
   ════════════════════════════════════════════════════════════════════════════ */

pre,
.file-content pre,
.blob-viewer pre {
  background: var(--aia-s1) !important;
  border: 1px solid var(--aia-bd) !important;
  border-radius: var(--aia-radius) !important;
}

.file-holder,
.blob-viewer-container {
  border-top: 1px solid var(--aia-bd) !important;
  /* gradient top removed per §3 restraint */
}

/* Inline code — subtle sage tint */
code:not(pre code) {
  background: rgba(var(--aia-ac-rgb), 0.07) !important;
  color: var(--aia-ac-h) !important;
  padding: 0.15em 0.4em !important;
  border-radius: var(--aia-radius-xs) !important;
  font-size: 0.88em !important;
  border: 1px solid rgba(var(--aia-ac-rgb), 0.10) !important;
}

.line-numbers .line-numbers-rows > span::before,
.blob-num {
  color: var(--aia-t5) !important;
}


/* ═════════════════════════════════════════════════════════════════════════════
   §11  FORMS & INPUTS — Surface s4 with sage focus
   ════════════════════════════════════════════════════════════════════════════ */

.gl-form-input,
.form-control,
textarea.form-control,
select.form-control,
input[type="text"],
input[type="password"],
input[type="email"],
input[type="search"],
input[type="url"],
input[type="number"] {
  background: var(--aia-s4) !important;
  border: 1px solid var(--aia-bd3) !important;
  border-radius: var(--aia-radius) !important;
  color: var(--aia-t1) !important;
  transition: var(--aia-transition) !important;
}

.gl-form-input:focus,
.form-control:focus,
input:focus,
textarea:focus {
  border-color: var(--aia-ac) !important;
  box-shadow: 0 0 0 3px rgba(var(--aia-ac-rgb), 0.15) !important;
  outline: none !important;
}

input::placeholder,
textarea::placeholder {
  color: var(--aia-t4) !important;
}


/* ═════════════════════════════════════════════════════════════════════════════
   §12  SIGN-IN PAGE — Calm glass panel on warm-charcoal field
   Wash uses the handbook --grad-d soft gradient (§3) at low alpha.
   ════════════════════════════════════════════════════════════════════════════ */

body.devise-layout-html,
.devise-layout-html .login-page,
.devise-layout-html .navless-container {
  background:
    radial-gradient(ellipse at 20% 50%, rgba(var(--aia-ac-rgb), 0.04) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 20%, rgba(var(--aia-gd-rgb), 0.03) 0%, transparent 50%),
    var(--aia-bg) !important;
}

.devise-layout-html .login-box {
  background: rgba(36, 36, 36, 0.80) !important;
  backdrop-filter: blur(20px) saturate(1.1) !important;
  -webkit-backdrop-filter: blur(20px) saturate(1.1) !important;
  border: 1px solid rgba(var(--aia-ac-rgb), 0.12) !important;
  border-radius: var(--aia-radius-l) !important;
  box-shadow:
    0 12px 40px rgba(0, 0, 0, 0.5),
    0 0 80px rgba(var(--aia-ac-rgb), 0.04),
    inset 0 1px 0 rgba(232, 230, 225, 0.04) !important;
}

.devise-layout-html .login-heading {
  color: var(--aia-t1) !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
}

.devise-layout-html .login-box .btn-confirm {
  box-shadow: 0 2px 12px rgba(var(--aia-ac-rgb), 0.30) !important;
}


/* ═════════════════════════════════════════════════════════════════════════════
   §13  TABLES — Warm charcoal, eyebrow headers
   ════════════════════════════════════════════════════════════════════════════ */

table,
.gl-table {
  background: var(--aia-s1) !important;
}

table thead,
.gl-table thead {
  background: var(--aia-s2) !important;
}

table th,
.gl-table th {
  font-weight: 600 !important;
  font-size: 0.7rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.18em !important;     /* eyebrow rhythm */
  color: var(--aia-t3) !important;
  border-bottom: 1px solid var(--aia-bd2) !important;
}

table td,
.gl-table td {
  border-bottom: 1px solid var(--aia-bd) !important;
}

table tbody tr:hover,
.gl-table tbody tr:hover {
  background: var(--aia-s2) !important;
}


/* ═════════════════════════════════════════════════════════════════════════════
   §14  TABS — Sage underline active
   ════════════════════════════════════════════════════════════════════════════ */

.nav-tabs .nav-link,
.gl-tabs-nav .gl-tab-nav-item {
  color: var(--aia-t3) !important;
  border-bottom: 2px solid transparent !important;
  transition: var(--aia-transition) !important;
  padding-bottom: 0.5rem !important;
}

.nav-tabs .nav-link:hover,
.gl-tabs-nav .gl-tab-nav-item:hover {
  color: var(--aia-ac-h) !important;
  border-bottom-color: rgba(var(--aia-ac-rgb), 0.35) !important;
}

.nav-tabs .nav-link.active,
.gl-tabs-nav .gl-tab-nav-item-active {
  color: var(--aia-ac) !important;
  border-bottom-color: var(--aia-ac) !important;
  font-weight: 600 !important;
}


/* ═════════════════════════════════════════════════════════════════════════════
   §15  BADGES — Refined labels
   ════════════════════════════════════════════════════════════════════════════ */

.badge,
.gl-badge {
  border-radius: var(--aia-radius-s) !important;
  font-weight: 600 !important;
  font-size: 0.7rem !important;
  letter-spacing: 0.04em !important;
}


/* ═════════════════════════════════════════════════════════════════════════════
   §16  DROPDOWNS & POPOVERS — Dark glass
   ════════════════════════════════════════════════════════════════════════════ */

.dropdown-menu,
.gl-new-dropdown-panel,
[class*="dropdown-menu"] {
  background: rgba(36, 36, 36, 0.96) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  border: 1px solid var(--aia-bd2) !important;
  border-radius: var(--aia-radius) !important;
  box-shadow: var(--aia-shadow-lg) !important;
}

.dropdown-item:hover,
.gl-new-dropdown-item:hover {
  background: rgba(var(--aia-ac-rgb), 0.10) !important;
  color: var(--aia-ac-h) !important;
}


/* ═════════════════════════════════════════════════════════════════════════════
   §17  MARKDOWN RENDERING — Handbook §11 typography
   Calm-down delta vs v4: h3 is now --t1 with subtle sage-tint underline
   rather than a full sage flood; gives heading hierarchy without shouting.
   ════════════════════════════════════════════════════════════════════════════ */

.md,
.wiki-page-content,
.file-content .md {
  color: var(--aia-t2) !important;
  line-height: 1.7 !important;
}

.md p,
.wiki-page-content p {
  color: var(--aia-t2) !important;
}

/* H1 — gradient bottom-accent (signature handbook treatment, retained) */
.md h1,
.wiki h1 {
  color: var(--aia-t1) !important;
  font-weight: 700 !important;
  letter-spacing: -0.025em !important;
  border-bottom: 1px solid var(--aia-bd2) !important;
  padding-bottom: 0.5rem !important;
  position: relative !important;
}

.md h1::after,
.wiki h1::after {
  content: '' !important;
  position: absolute !important;
  bottom: -1px !important;
  left: 0 !important;
  width: 64px !important;
  height: 2px !important;
  background: var(--aia-ac) !important;   /* de-teal: gray accent, gradient reserved for pill */
  border-radius: 1px !important;
}

.md h2,
.wiki h2 {
  color: var(--aia-t1) !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  margin-top: 2rem !important;
}

/* H3 — primary text with subtle sage accent on the rule below (no flood) */
.md h3,
.wiki h3 {
  color: var(--aia-t1) !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
  margin-top: 1.5rem !important;
}

/* H4 — eyebrow rhythm (handbook §4) */
.md h4,
.wiki h4 {
  color: var(--aia-ac) !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  font-size: 0.72rem !important;
  letter-spacing: 0.18em !important;
}

/* Blockquotes — sage left rule, soft tint */
.md blockquote,
.wiki blockquote {
  border-left: 2px solid var(--aia-ac) !important;
  background: rgba(var(--aia-ac-rgb), 0.05) !important;
  padding: 0.75rem 1rem !important;
  border-radius: 0 var(--aia-radius) var(--aia-radius) 0 !important;
  color: var(--aia-t2) !important;
}

/* Lists — comfortable spacing */
.md ul,
.md ol,
.wiki ul,
.wiki ol {
  color: var(--aia-t2) !important;
  line-height: 1.7 !important;
}

.md li {
  margin: 0.25rem 0 !important;
}

/* Horizontal rules — single hairline, no decorative gradient (calm) */
.md hr,
.wiki hr {
  border: none !important;
  height: 1px !important;
  background: var(--aia-bd2) !important;
  margin: 2rem 0 !important;
}

/* Task lists */
.md input[type="checkbox"] {
  accent-color: var(--aia-ac) !important;
}

/* Markdown tables inside .md content */
.md table,
.wiki table {
  background: var(--aia-s1) !important;
  border-radius: var(--aia-radius) !important;
  overflow: hidden !important;
}

.md table th,
.wiki table th {
  background: var(--aia-s2) !important;
  color: var(--aia-t3) !important;
}


/* ═════════════════════════════════════════════════════════════════════════════
   §18  COMMIT & MR WIDGETS
   ════════════════════════════════════════════════════════════════════════════ */

.commit-box,
.info-well,
.well,
.mr-widget-body,
[class*="mr-widget"] {
  background: var(--aia-s2) !important;
  border: 1px solid var(--aia-bd) !important;
  border-radius: var(--aia-radius) !important;
}


/* ═════════════════════════════════════════════════════════════════════════════
   §19  BREADCRUMBS — Quiet path, hover reveals sage
   ════════════════════════════════════════════════════════════════════════════ */

.breadcrumb,
[data-testid="breadcrumb-links"] {
  color: var(--aia-t4) !important;
  font-size: 0.85rem !important;
}

.breadcrumb a,
[data-testid="breadcrumb-links"] a {
  color: var(--aia-t3) !important;
}

.breadcrumb a:hover,
[data-testid="breadcrumb-links"] a:hover {
  color: var(--aia-ac) !important;
}

.breadcrumb-separator,
[data-testid="breadcrumb-links"] .gl-breadcrumb-chevron {
  color: var(--aia-t5) !important;
}


/* ═════════════════════════════════════════════════════════════════════════════
   §20  ALERTS / CALLOUTS — Soft tinted backgrounds
   ════════════════════════════════════════════════════════════════════════════ */

.gl-alert-info {
  background: rgba(var(--aia-ac-rgb), 0.06) !important;
  border: 1px solid rgba(var(--aia-ac-rgb), 0.15) !important;
}

.gl-alert-success {
  background: rgba(125, 184, 125, 0.06) !important;
  border: 1px solid rgba(125, 184, 125, 0.15) !important;
}

.gl-alert-warning {
  background: rgba(var(--aia-gd-rgb), 0.06) !important;
  border: 1px solid rgba(var(--aia-gd-rgb), 0.15) !important;
}

.gl-alert-danger {
  background: rgba(198, 107, 107, 0.06) !important;
  border: 1px solid rgba(198, 107, 107, 0.15) !important;
}


/* ═════════════════════════════════════════════════════════════════════════════
   §21  TOOLTIPS & POPOVERS
   ════════════════════════════════════════════════════════════════════════════ */

.tooltip-inner,
.gl-tooltip .tooltip-inner {
  background: var(--aia-s4) !important;
  border: 1px solid var(--aia-bd2) !important;
  border-radius: var(--aia-radius-s) !important;
  color: var(--aia-t1) !important;
  font-size: 0.78rem !important;
  box-shadow: var(--aia-shadow-md) !important;
}


/* ═════════════════════════════════════════════════════════════════════════════
   §22  DIFF VIEW — Clean diff markers (sage/coral/sage-green)
   ════════════════════════════════════════════════════════════════════════════ */

.diff-line-num {
  background: var(--aia-s1) !important;
  color: var(--aia-t5) !important;
}

.line_holder .line_content.old {
  background: rgba(198, 107, 107, 0.07) !important;
}

.line_holder .line_content.new {
  background: rgba(125, 184, 125, 0.07) !important;
}

.line_holder .line_content.old .idiff {
  background: rgba(198, 107, 107, 0.2) !important;
}

.line_holder .line_content.new .idiff {
  background: rgba(125, 184, 125, 0.2) !important;
}


/* ═════════════════════════════════════════════════════════════════════════════
   §23  LOADING / SKELETON — Calm shimmer
   ════════════════════════════════════════════════════════════════════════════ */

.gl-animate-skeleton-loader {
  background: linear-gradient(90deg,
      var(--aia-s2) 25%,
      var(--aia-s4) 50%,
      var(--aia-s2) 75%) !important;
  background-size: 200% 100% !important;
}


/* ═════════════════════════════════════════════════════════════════════════════
   §24  SCROLLBAR — Thin, unobtrusive
   ════════════════════════════════════════════════════════════════════════════ */

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

::-webkit-scrollbar-track {
  background: var(--aia-bg);
}

::-webkit-scrollbar-thumb {
  background: var(--aia-s5);
  border-radius: var(--aia-radius-pill);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--aia-t4);
}

* {
  scrollbar-color: var(--aia-s5) var(--aia-bg);
  scrollbar-width: thin;
}


/* ═════════════════════════════════════════════════════════════════════════════
   §25  SELECTION — Sage highlight
   ════════════════════════════════════════════════════════════════════════════ */

::selection {
  background: rgba(var(--aia-ac-rgb), 0.25) !important;
  color: var(--aia-t1) !important;
}


/* ═════════════════════════════════════════════════════════════════════════════
   §26  MICRO-INTERACTIONS — Gentle (calm-down delta vs v4)
   Removed the page-wide aia-fade-in keyframe — animating every page reload
   is the opposite of calm. Kept the card hover lift.
   ════════════════════════════════════════════════════════════════════════════ */

.project-card:hover,
.group-card:hover,
[data-testid="project-card"]:hover {
  transform: translateY(-1px) !important;
  box-shadow: var(--aia-shadow-md) !important;
  border-color: var(--aia-bd2) !important;
}

.super-sidebar {
  transition: width 280ms var(--aia-ease-io) !important;
}


/* ═════════════════════════════════════════════════════════════════════════════
   §27  ISSUE / MR LIST ITEMS — Hairline rows, neutral hover
   ════════════════════════════════════════════════════════════════════════════ */

.issue-item,
.merge-request-item,
[data-testid="issuable-container"] > li {
  border-bottom: 1px solid var(--aia-bd) !important;
  transition: var(--aia-transition-fast) !important;
}

.issue-item:hover,
.merge-request-item:hover,
[data-testid="issuable-container"] > li:hover {
  background: var(--aia-s2) !important;
}


/* ═════════════════════════════════════════════════════════════════════════════
   §28  PIPELINE & JOB VIEWS
   ════════════════════════════════════════════════════════════════════════════ */

.ci-job-component {
  border: 1px solid var(--aia-bd) !important;
  border-radius: var(--aia-radius) !important;
  transition: var(--aia-transition) !important;
}

.ci-job-component:hover {
  border-color: rgba(var(--aia-ac-rgb), 0.40) !important;
  box-shadow: 0 0 0 1px rgba(var(--aia-ac-rgb), 0.10) !important;
}


/* ═════════════════════════════════════════════════════════════════════════════
   §29  EMPTY STATES — Centered, calm
   ════════════════════════════════════════════════════════════════════════════ */

.empty-state {
  color: var(--aia-t3) !important;
}

.empty-state .empty-state-title {
  color: var(--aia-t2) !important;
  font-weight: 600 !important;
}


/* ═════════════════════════════════════════════════════════════════════════════
   §30  MODAL / DIALOG — Glass overlay
   ════════════════════════════════════════════════════════════════════════════ */

.modal-content,
.gl-modal .modal-content {
  background: rgba(36, 36, 36, 0.94) !important;
  backdrop-filter: blur(18px) !important;
  -webkit-backdrop-filter: blur(18px) !important;
  border: 1px solid var(--aia-bd2) !important;
  border-radius: var(--aia-radius-l) !important;
  box-shadow: var(--aia-shadow-lg) !important;
}

.modal-backdrop {
  background: rgba(26, 26, 26, 0.75) !important;
}

.modal-header {
  border-bottom: 1px solid var(--aia-bd) !important;
}

.modal-footer {
  border-top: 1px solid var(--aia-bd) !important;
}


/* ═════════════════════════════════════════════════════════════════════════════
   §31  PROGRESS BARS — Sage→amber fill
   ════════════════════════════════════════════════════════════════════════════ */

.progress {
  background: var(--aia-s3) !important;
  border-radius: var(--aia-radius-pill) !important;
}

.progress-bar {
  background: var(--aia-gd) !important;   /* de-teal: amber fill, gradient reserved for pill */
  border-radius: var(--aia-radius-pill) !important;
}


/* ═════════════════════════════════════════════════════════════════════════════
   §32  AVATAR — Subtle ring, sage on hover
   ════════════════════════════════════════════════════════════════════════════ */

.gl-avatar,
.avatar {
  border: 2px solid var(--aia-bd) !important;
  transition: border-color 180ms ease !important;
}

.gl-avatar:hover,
.avatar:hover {
  border-color: var(--aia-ac) !important;
}


/* ═════════════════════════════════════════════════════════════════════════════
   §33  TOGGLE / SWITCH — Sage checked
   ════════════════════════════════════════════════════════════════════════════ */

.gl-toggle.is-checked {
  background: var(--aia-ac) !important;
}

.gl-toggle:not(.is-checked) {
  background: var(--aia-bd3) !important;
}


/* ═════════════════════════════════════════════════════════════════════════════
   §34  WIKI / PAGES — Comfortable reading column
   ════════════════════════════════════════════════════════════════════════════ */

.wiki-page-content,
.file-content .md {
  max-width: 72ch;
  line-height: 1.75;
}


/* ═════════════════════════════════════════════════════════════════════════════
   §35  PRINT STYLES — Clean output
   ════════════════════════════════════════════════════════════════════════════ */

@media print {

  .super-sidebar,
  .header-message,
  .footer-message,
  header.super-topbar {
    display: none !important;
  }

  body {
    background: #FAFAF7 !important;
    color: #1A1A1A !important;
  }
}


/* ── §7b  Links — affordance by WEIGHT, not colour (de-teal direction) ──────
   Links are neutral (--gl-text-color-link = --t1), same hue as body text, so
   weight + hover-underline carry the "this is a link" signal instead of teal. */
a.gl-link, .gl-link, .md a:not(.gl-button), .issue-title a, .merge-request-title a,
.title a, .gl-link.gl-text-truncate, a.help-link {
  font-weight: 600 !important;
}
a.gl-link:hover, .gl-link:hover, .md a:not(.gl-button):hover {
  text-decoration: underline !important;
  color: #FFFFFF !important;
}


/* ═════════════════════════════════════════════════════════════════════════════
   §36  LIGHT MODE — "Sunset Sky" (handbook §2.3a)
   GitLab uses :root.gl-dark for dark and bare :root (light Pajamas) for light —
   there is no .gl-light class, so the light scope is :root:not(.gl-dark).
   Ported from aia-website aia-v6.css html[data-theme="light"]: cream surfaces,
   ink text, sky-blue ↔ sunset-orange. SAME de-accent discipline as dark — the
   sky→sunset gradient is reserved for the apex pill; everything else is calm
   ink-on-cream monochrome (accent --aia-ac re-pointed to slate gray).
   ALL --aia-* tokens are redefined here (they are only defined under .gl-dark
   otherwise, which would leave the global component rules valueless in light).
   ════════════════════════════════════════════════════════════════════════════ */

:root:not(.gl-dark) {

  /* ── Neutral scale — cream ramp (0 lightest → 1000 darkest, light semantics) ── */
  --gl-color-neutral-0:    #FFFFFF;
  --gl-color-neutral-10:   #FAFAF7;   /* = --bg page */
  --gl-color-neutral-50:   #F4F4ED;   /* = --s1 */
  --gl-color-neutral-100:  #EDEDE3;   /* = --s2 cards */
  --gl-color-neutral-200:  #E2E2D6;   /* = --s3 hover */
  --gl-color-neutral-300:  #D2D2C4;   /* = --s4 */
  --gl-color-neutral-400:  #BFBFAE;   /* = --s5 */
  --gl-color-neutral-500:  #A0A0B4;   /* = --t5 */
  --gl-color-neutral-600:  #7E7E96;   /* = --t4 */
  --gl-color-neutral-700:  #5C5C76;   /* = --t3 */
  --gl-color-neutral-800:  #3C3C4D;   /* = --t2 */
  --gl-color-neutral-900:  #14141C;   /* = --t1 primary text */
  --gl-color-neutral-950:  #0C0C12;
  --gl-color-neutral-1000: #000000;

  /* ── Blue → ink grays (de-accent: sky reserved for the apex pill only) ── */
  --gl-color-blue-50:  rgba(20, 20, 28, 0.04);
  --gl-color-blue-100: rgba(20, 20, 28, 0.07);
  --gl-color-blue-200: rgba(20, 20, 28, 0.12);
  --gl-color-blue-300: #7E7E96;
  --gl-color-blue-400: #5C5C76;
  --gl-color-blue-500: #3C3C4D;   /* link/interactive ink (was blue) */
  --gl-color-blue-600: #2A2A38;
  --gl-color-blue-700: #14141C;
  --gl-color-blue-800: #0C0C12;
  --gl-color-blue-900: #080810;
  --gl-color-blue-950: #040408;

  /* ── Green → success (cream-readable) ── */
  --gl-color-green-50:  rgba(94, 140, 78, 0.08);
  --gl-color-green-100: rgba(94, 140, 78, 0.14);
  --gl-color-green-200: rgba(94, 140, 78, 0.22);
  --gl-color-green-300: #A6C496;
  --gl-color-green-400: #79A368;
  --gl-color-green-500: #5E8C4E;
  --gl-color-green-600: #4F7742;
  --gl-color-green-700: #406235;
  --gl-color-green-800: #314D29;
  --gl-color-green-900: #24391E;
  --gl-color-green-950: #1A2A16;

  /* ── Orange → sunset (warning / amber roles) ── */
  --gl-color-orange-50:  rgba(216, 122, 53, 0.08);
  --gl-color-orange-100: rgba(216, 122, 53, 0.14);
  --gl-color-orange-200: rgba(216, 122, 53, 0.22);
  --gl-color-orange-300: #F0B488;
  --gl-color-orange-400: #E0925A;
  --gl-color-orange-500: #D87A35;   /* warning text/icon on cream */
  --gl-color-orange-600: #BB6526;
  --gl-color-orange-700: #97511E;
  --gl-color-orange-800: #743E17;
  --gl-color-orange-900: #562E11;
  --gl-color-orange-950: #3D210C;

  /* ── Red → coral (cream-readable, handbook light --rd #A04545) ── */
  --gl-color-red-50:  rgba(160, 69, 69, 0.07);
  --gl-color-red-100: rgba(160, 69, 69, 0.13);
  --gl-color-red-200: rgba(160, 69, 69, 0.20);
  --gl-color-red-300: #CF9292;
  --gl-color-red-400: #B86464;
  --gl-color-red-500: #A04545;   /* = light --rd */
  --gl-color-red-600: #8A3838;
  --gl-color-red-700: #732D2D;
  --gl-color-red-800: #5C2424;
  --gl-color-red-900: #451B1B;
  --gl-color-red-950: #311313;

  /* ── Purple → violet (handbook light --pr #6E5F95) ── */
  --gl-color-purple-50:  rgba(110, 95, 149, 0.07);
  --gl-color-purple-100: rgba(110, 95, 149, 0.13);
  --gl-color-purple-200: rgba(110, 95, 149, 0.20);
  --gl-color-purple-300: #A99CC4;
  --gl-color-purple-400: #877AAC;
  --gl-color-purple-500: #6E5F95;   /* = light --pr */
  --gl-color-purple-600: #5C4F7E;
  --gl-color-purple-700: #4A4066;
  --gl-color-purple-800: #38304E;
  --gl-color-purple-900: #2A243B;
  --gl-color-purple-950: #1E1A2A;

  /* ── Alpha channels (light: dark ink overlays, light scrims) ── */
  --gl-color-alpha-dark-2:  rgba(20, 20, 28, 0.02);
  --gl-color-alpha-dark-4:  rgba(20, 20, 28, 0.04);
  --gl-color-alpha-dark-6:  rgba(20, 20, 28, 0.06);
  --gl-color-alpha-dark-8:  rgba(20, 20, 28, 0.08);
  --gl-color-alpha-dark-16: rgba(20, 20, 28, 0.16);
  --gl-color-alpha-dark-24: rgba(20, 20, 28, 0.24);
  --gl-color-alpha-dark-40: rgba(20, 20, 28, 0.40);
  --gl-color-alpha-light-2:  rgba(255, 255, 255, 0.02);
  --gl-color-alpha-light-4:  rgba(255, 255, 255, 0.04);
  --gl-color-alpha-light-6:  rgba(255, 255, 255, 0.06);
  --gl-color-alpha-light-8:  rgba(255, 255, 255, 0.08);
  --gl-color-alpha-light-16: rgba(255, 255, 255, 0.16);
  --gl-color-alpha-light-24: rgba(255, 255, 255, 0.24);
  --gl-color-alpha-light-36: rgba(255, 255, 255, 0.36);

  /* ── Data viz (light, de-teal: muted slate aqua) ── */
  --data-viz-aqua-500:    #4F7A8A;
  --data-viz-aqua-600:    #3E6675;
  --data-viz-aqua-700:    #2F5260;
  --data-viz-blue-500:    #4F7090;   /* = light --bl */
  --data-viz-green-500:   #5E8C4E;
  --data-viz-orange-500:  #D87A35;
  --data-viz-magenta-500: #A04545;

  /* ── Theme indigo → slate-gray ramp (de-accent) ── */
  --theme-indigo-10:  #FAFAF7;
  --theme-indigo-50:  #F4F4ED;
  --theme-indigo-100: #EDEDE3;
  --theme-indigo-200: #E2E2D6;
  --theme-indigo-300: #D2D2C4;
  --theme-indigo-400: #7E7E96;
  --theme-indigo-500: #5C5C76;
  --theme-indigo-600: #3C3C4D;
  --theme-indigo-700: #2A2A38;
  --theme-indigo-800: #14141C;
  --theme-indigo-900: #0C0C12;
  --theme-indigo-950: #060608;

  /* ── Semantic background tokens (cream tiers) ── */
  --gl-background-color-default: #FAFAF7;
  --gl-background-color-subtle:  #F4F4ED;
  --gl-background-color-strong:  #E2E2D6;
  --gl-background-color-section: #EDEDE3;
  --gl-background-color-overlap: #FFFFFF;

  /* ── Semantic border tokens ── */
  --gl-border-color-default: rgba(20, 20, 28, 0.12);
  --gl-border-color-subtle:  rgba(20, 20, 28, 0.08);
  --gl-border-color-section: rgba(20, 20, 28, 0.14);
  --gl-border-color-strong:  rgba(20, 20, 28, 0.22);

  /* ── Semantic text tokens ── */
  --gl-text-color-default:  #14141C;
  --gl-text-color-subtle:   #5C5C76;
  --gl-text-color-strong:   #0C0C12;
  --gl-text-color-disabled: #A0A0B4;
  --gl-text-color-link:     #14141C;   /* neutral; affordance via weight + hover underline */
  --gl-text-color-heading:  #14141C;

  /* ── Focus ring — neutral slate ── */
  --gl-focus-ring-inner-color: #FAFAF7;
  --gl-focus-ring-outer-color: rgba(60, 60, 77, 0.45);

  /* ── Control tokens (forms) — neutral (affordance by brightness/weight) ── */
  --gl-control-background-color-default:        #FFFFFF;
  --gl-control-border-color-default:            rgba(20, 20, 28, 0.22);
  --gl-control-border-color-hover:              rgba(20, 20, 28, 0.34);
  --gl-control-border-color-focus:              #5C5C76;
  --gl-control-border-color-selected-default:   #14141C;

  /* ── Feedback tokens (light, semantic) ── */
  --gl-feedback-info-background-color:    rgba(79, 112, 144, 0.10);
  --gl-feedback-info-text-color:          #3E5C75;
  --gl-feedback-info-icon-color:          #4F7090;
  --gl-feedback-success-background-color: rgba(94, 140, 78, 0.10);
  --gl-feedback-success-text-color:       #4F7742;
  --gl-feedback-warning-background-color: rgba(216, 122, 53, 0.10);
  --gl-feedback-warning-text-color:       #97511E;
  --gl-feedback-danger-background-color:  rgba(160, 69, 69, 0.10);
  --gl-feedback-danger-text-color:        #8A3838;

  /* ── CI/CD icon tokens (light) ── */
  --ci-icon-success-background-color: rgba(94, 140, 78, 0.16);
  --ci-icon-success-text-color:       #4F7742;
  --ci-icon-success-icon-color:       #4F7742;
  --ci-icon-warning-background-color: rgba(216, 122, 53, 0.16);
  --ci-icon-warning-text-color:       #97511E;
  --ci-icon-warning-icon-color:       #97511E;

  /* ── AIA custom tokens — light "sunset sky" (handbook §2.3a) ── */
  --aia-bg:        #FAFAF7;
  --aia-s1:        #F4F4ED;
  --aia-s2:        #EDEDE3;
  --aia-s3:        #E2E2D6;
  --aia-s4:        #D2D2C4;
  --aia-s5:        #BFBFAE;
  --aia-t1:        #14141C;
  --aia-t2:        #3C3C4D;
  --aia-t3:        #5C5C76;
  --aia-t4:        #7E7E96;
  --aia-t5:        #A0A0B4;
  /* Accent re-pointed to slate gray: sky blue is RESERVED for the apex pill. */
  --aia-ac:        #3C3C4D;   /* mid ink — was sky #4A90C9 */
  --aia-ac-d:      #5C5C76;   /* = --t3 */
  --aia-ac-h:      #14141C;   /* = --t1 (darker on hover) */
  --aia-ac-rgb:    60, 60, 77;
  --aia-gd:        #FF9F5B;
  --aia-gd-d:      #E0925A;
  --aia-gd-h:      #FFB57E;
  --aia-gd-rgb:    255, 159, 91;
  --aia-rd:        #A04545;
  --aia-gn:        #5E8C4E;
  --aia-bl:        #4F7090;
  --aia-pr:        #6E5F95;
  --aia-bd:        rgba(20, 20, 28, 0.08);
  --aia-bd2:       rgba(20, 20, 28, 0.14);
  --aia-bd3:       rgba(20, 20, 28, 0.22);
  --aia-bd-ac:     rgba(20, 20, 28, 0.14);
  --aia-shadow-sm: 0 1px 2px rgba(20, 20, 28, 0.06);
  --aia-shadow-md: 0 4px 12px rgba(20, 20, 28, 0.08), 0 2px 4px rgba(20, 20, 28, 0.05);
  --aia-shadow-lg: 0 12px 32px rgba(20, 20, 28, 0.12), 0 4px 8px rgba(20, 20, 28, 0.06);
  --aia-grad:      linear-gradient(135deg, #6BA6D9 0%, #FF9F5B 100%);   /* sky → sunset */
  --aia-grad-tx:   linear-gradient(135deg, #4A90C9 0%, #F0884A 100%);
  --aia-glow-ac:   0 0 24px rgba(20, 20, 28, 0.06);
  --aia-glow-gd:   0 0 32px rgba(255, 159, 91, 0.16);
}

/* ── Light component overrides — rules that hardcode dark-specific colours ── */

/* Primary pill — sky→sunset animated wave (the ONE place the gradient appears) */
:root:not(.gl-dark) .btn-confirm,
:root:not(.gl-dark) .btn-primary,
:root:not(.gl-dark) .gl-button.btn-confirm,
:root:not(.gl-dark) [class*="btn-confirm"]:not([class*="secondary"]):not([class*="tertiary"]) {
  background: linear-gradient(93deg, #6BA6D9 0%, rgba(255,159,91,0.92) 45%, #6BA6D9 100%) !important;
  background-size: 250% 150% !important;
  color: #FFFFFF !important;
  box-shadow: 0 4px 16px rgba(74,144,201, 0.30) !important;
}
:root:not(.gl-dark) .btn-confirm:hover,
:root:not(.gl-dark) .btn-primary:hover,
:root:not(.gl-dark) .gl-button.btn-confirm:hover {
  background: linear-gradient(93deg, #FF9F5B 0%, rgba(107,166,217,0.96) 55%, #FF9F5B 100%) !important;
  box-shadow: 0 8px 28px rgba(255,159,91, 0.34) !important;
}

/* Dropdowns / popovers — light glass */
:root:not(.gl-dark) .dropdown-menu,
:root:not(.gl-dark) .gl-new-dropdown-panel,
:root:not(.gl-dark) [class*="dropdown-menu"] {
  background: rgba(255, 255, 255, 0.94) !important;
  border: 1px solid rgba(20, 20, 28, 0.12) !important;
}

/* Modal / dialog — light glass + light scrim */
:root:not(.gl-dark) .modal-content,
:root:not(.gl-dark) .gl-modal .modal-content {
  background: rgba(255, 255, 255, 0.96) !important;
  border: 1px solid rgba(20, 20, 28, 0.12) !important;
}
:root:not(.gl-dark) .modal-backdrop {
  background: rgba(20, 20, 28, 0.35) !important;
}

/* Sign-in glass panel — cream glass on the sunset-sky wash */
:root:not(.gl-dark) .devise-layout-html .login-box {
  background: rgba(255, 255, 255, 0.82) !important;
  border: 1px solid rgba(20, 20, 28, 0.10) !important;
  box-shadow:
    0 12px 40px rgba(20, 20, 28, 0.12),
    0 0 80px rgba(74, 144, 201, 0.05),
    inset 0 1px 0 rgba(255, 255, 255, 0.6) !important;
}

/* Diff tints — light coral / green (literal rgba, do not re-theme via tokens) */
:root:not(.gl-dark) .line_holder .line_content.old { background: rgba(160, 69, 69, 0.08) !important; }
:root:not(.gl-dark) .line_holder .line_content.new { background: rgba(94, 140, 78, 0.10) !important; }
:root:not(.gl-dark) .line_holder .line_content.old .idiff { background: rgba(160, 69, 69, 0.22) !important; }
:root:not(.gl-dark) .line_holder .line_content.new .idiff { background: rgba(94, 140, 78, 0.24) !important; }

/* Inline code — subtle ink tint on cream (keep readable) */
:root:not(.gl-dark) code:not(pre code) {
  background: rgba(20, 20, 28, 0.05) !important;
  color: #3C3C4D !important;
  border: 1px solid rgba(20, 20, 28, 0.08) !important;
}

/* Tooltip — keep dark for contrast on light UI (legibility) */
:root:not(.gl-dark) .tooltip-inner,
:root:not(.gl-dark) .gl-tooltip .tooltip-inner {
  background: #14141C !important;
  border: 1px solid rgba(20, 20, 28, 0.4) !important;
  color: #FAFAF7 !important;
}

/* Print — already light; no change needed */

/* Light sign-in — sunset-sky wash (the §12 radial uses --aia-ac-rgb which is
   ink-gray in light; restore the sky↔sunset hero wash for the auth moment) */
:root:not(.gl-dark) body.devise-layout-html,
:root:not(.gl-dark) .devise-layout-html .login-page,
:root:not(.gl-dark) .devise-layout-html .navless-container {
  background:
    radial-gradient(ellipse at 20% 50%, rgba(74, 144, 201, 0.10) 0%, transparent 55%),
    radial-gradient(ellipse at 80% 20%, rgba(255, 159, 91, 0.08) 0%, transparent 55%),
    #FAFAF7 !important;
}


/* ═════════════════════════════════════════════════════════════════════════════
   §37  PAGE SURFACE GUARD — keep the page on the Horizon Calm background
   GitLab's ui-* navigation themes (this instance uses "Red") wash <body> with a
   themed tint (e.g. --gl-color-red-50). Pin body to the canonical surface token
   so both modes stay true to the palette regardless of the chosen nav theme.
   ════════════════════════════════════════════════════════════════════════════ */
body {
  background-color: var(--aia-bg) !important;
  background-image: none !important;   /* kill ui-* nav-theme red/brown radial wash */
}

/* ═════════════════════════════════════════════════════════════════════════════
   §37b  NAV THEME → MONOCHROME
   GitLab's coloured nav themes (this instance is "Red") wash the super-sidebar
   accent vars (active item fg/bg, badges, topbar accent, notification dot) with
   their hue via --theme-accent-color / --super-sidebar-accent-color-*. Pin those
   to the Horizon Calm gray accent so the highlight is monochromatic regardless of
   the chosen nav theme. Danger/error red (--gl-color-red-* on buttons & alerts)
   is intentionally left intact. !important wins over GitLab's higher-specificity
   .ui-red rules (which are not !important).
   ════════════════════════════════════════════════════════════════════════════ */
.super-topbar,
.super-sidebar,
.application-chrome {
  --theme-color:                      var(--aia-ac) !important;
  --theme-accent-color:               var(--aia-ac) !important;
  --theme-notification-color:         var(--aia-ac) !important;
  --super-sidebar-accent-color-fg:    var(--aia-ac) !important;
  --super-sidebar-accent-color-bg:    rgba(var(--aia-ac-rgb), 0.12) !important;
  --super-sidebar-accent-color-badge: var(--aia-ac) !important;
}