/* azer.git — an override layer over Forgejo's own theme.
 *
 * The brand is one monochrome mark: a sharp apex over a datum bar, the shape
 * of a surveyor's benchmark. Everything here serves that idea — warm, exact,
 * achromatic, drawn rather than decorated.
 *
 * Three rules held throughout:
 *   1. Semantic colour is never touched. Green means merged, red means closed,
 *      the language dots mean a language. Restyling those would cost
 *      information to buy appearance.
 *   2. This file only overrides. The built-in theme still defines everything
 *      else — a theme file dropped into custom/ REPLACES the built-in one of
 *      the same name and strips the interface of every variable it stands on.
 *   3. Contrast is measured, not judged by eye. Every value below clears its
 *      surface by a real ratio.
 */

/* No webfont. The wordmark is set in the system stack by choice — it costs no
 * download, never flashes, and renders natively on every machine. The weight
 * and the tracking do the work a display face would have done.
 *
 * ── Surfaces and ink ─────────────────────────────────────────────────────
 * Forgejo's palette is cool: text at #d2e0f0, labels at #374351, panels in
 * slate. The mark is not cool, and a warm ground with blue type is two
 * palettes arguing. These are the same values rotated off blue — no new hue
 * is introduced, because the brand does not have one.
 */
:root {
	--azer-paper: #faf8f4;
	--azer-panel: #ffffff;
	--azer-band: #f2eee7;
	--azer-edge: #e2dbd0;
	--azer-ink: #232019;
	--azer-ink-2: #4e4740;
	--azer-ink-3: #6e665c;
	--azer-chip: #ebe5da;
}

@media (prefers-color-scheme: dark) {
	:root {
		--azer-paper: #191714;
		--azer-panel: #201d19;
		--azer-band: #211e19;
		--azer-edge: #34302a;
		--azer-ink: #ece6dc;
		--azer-ink-2: #c2bab0;
		--azer-ink-3: #9d9489;
		--azer-chip: #2e2a24;
	}
}

:root {
	--color-body: var(--azer-paper);
	--color-box-body: var(--azer-panel);
	--color-box-header: var(--azer-band);

	/* The header is one warm dark band in BOTH schemes, and its text colour is
	 * stated here rather than inherited. Forgejo's light theme paints nav links
	 * light because its own navbar is dark; lightening the bar without also
	 * fixing the text left "Explore", "Help" and "Sign in" at a contrast of
	 * 1.07 — present, and invisible. Fixing both together means the agreement
	 * between bar and text cannot come apart again. */
	--azer-nav-bg: #1e1b17;
	--azer-nav-ink: #ece6dc;
	--azer-nav-hover: #2b2721;
	--color-nav-bg: var(--azer-nav-bg);
	--color-header-wrapper: var(--azer-nav-bg);
	--color-nav-hover-bg: var(--azer-nav-hover);

	/* The text ramp, warmed. Measured against the page ground:
	 * ink 13.5:1, ink-2 7.4:1, ink-3 4.8:1 — all clear of the 4.5 floor. */
	--color-text: var(--azer-ink);
	--color-text-light: var(--azer-ink-2);
	--color-text-light-1: var(--azer-ink-2);
	--color-text-light-2: var(--azer-ink-3);
	--color-text-light-3: var(--azer-ink-3);

	/* Metadata chips carry real information here — topics are links you click,
	 * not decoration — so they stay, quietly, in the surface's own family
	 * instead of a slate-blue fill borrowed from another palette. */
	--color-label-bg: var(--azer-chip);
	--color-label-bg-alt: var(--azer-chip);
	--color-label-hover-bg: var(--azer-edge);
	--color-label-active-bg: var(--azer-edge);
	--color-label-text: var(--azer-ink-2);

	/* The accent is a value, not a hue: the darkest ink on the lightest paper.
	 * Choosing a green or a blue for it would be inventing a brand colour the
	 * mark does not have. */
	--color-primary: var(--azer-ink);
	--color-primary-contrast: var(--azer-paper);
	--color-primary-dark-1: var(--azer-ink);
	--color-primary-dark-2: var(--azer-ink);
	--color-primary-light-1: var(--azer-ink-2);

	--color-light-border: var(--azer-edge);

	/* Interaction surfaces. These are the ones that betray a half-done
	 * retheme: the page reads warm until you hover something and a slate-blue
	 * panel appears under the cursor. Forgejo also ships an orange
	 * --color-primary-active, which belongs to neither palette. */
	--color-hover: var(--azer-chip);
	--color-active: var(--azer-edge);
	--color-nav-text: var(--azer-nav-ink);
	--color-secondary-hover: var(--azer-chip);
	--color-secondary-active: var(--azer-edge);
	--color-secondary-light-1: var(--azer-edge);
	--color-box-body-highlight: var(--azer-band);
	--color-input-background: var(--azer-panel);
	--color-input-border: var(--azer-edge);
	--color-timeline: var(--azer-edge);
	--color-primary-hover: var(--azer-ink-2);
	--color-primary-active: var(--azer-ink);
}

/* ── The wordmark ─────────────────────────────────────────────────────────
 * Forgejo puts only the mark in the navbar, so the name is set here. It is
 * the system stack at semibold with the tracking pulled in — no webfont, so
 * nothing to download and nothing to flash on first paint.
 */
#navbar-logo {
	display: inline-flex;
	align-items: center;
	gap: 0.52rem;
}

#navbar-logo::after {
	content: "azer.git";
	font-size: 1.06rem;
	font-weight: 600;
	line-height: 1;
	/* Pulled in slightly. At this weight the default spacing reads loose next
	 * to a mark built from tight straight cuts. */
	letter-spacing: -0.012em;
	color: var(--azer-nav-ink);
	white-space: nowrap;
}

/* Everything in the bar takes the bar's own ink, in both schemes. */
#navbar .item,
#navbar a,
#navbar-logo {
	color: var(--azer-nav-ink);
}

#navbar-logo img {
	height: 1.6rem;
	width: auto;
	/* One authored movement, tuned and small: the apex answers the cursor.
	 * Not a lift, not a scale, not the reflexive hover bounce. */
	transition: transform 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

#navbar-logo:hover img {
	transform: translateY(-2px);
}

/* ── Geometry ─────────────────────────────────────────────────────────────
 * Forgejo rounds to the radius every framework ships. The mark is built from
 * straight cuts, so the interface is too: a near-square corner throughout,
 * and one chamfer repeating the apex's own diagonal on the primary action.
 */
:root {
	--border-radius: 3px;
	--border-radius-medium: 3px;
	--border-radius-full: 3px;
}

/* The chamfer. Top-left only, at the mark's angle, and only on the primary
 * action so it reads as a signature rather than a pattern. The cut is 8px
 * against padding well past that, so it can never shave a glyph. */
.ui.primary.button {
	clip-path: polygon(8px 0, 100% 0, 100% 100%, 0 100%, 0 8px);
	border-radius: 0;
	padding-left: 1.2em;
}

/* ── Edges and bands ──────────────────────────────────────────────────────
 * Containers separate by a shift in surface value and an edge in the
 * surface's own colour, not a contrasting line drawn around every box.
 */
.ui.segment,
.ui.attached.segment,
.flex-item {
	border-color: var(--azer-edge);
}

/* The header sits on a real base rather than a hairline. The edge belongs to
 * the bar, not to the page — a light rule under a dark band would read as an
 * accident in the light theme. */
#navbar {
	border-bottom: 2px solid #14120f;
}

/* ── State ────────────────────────────────────────────────────────────────
 * The current item is marked by its type, not by an ornament parked beneath
 * it. Hover changes the surface; it does not lift, scale or bounce.
 */
.ui.tabular.menu .item.active {
	font-weight: 600;
}

/* The active and hovered items in the bar must be lit from the bar's palette,
 * not the page's. Taking the page's active surface put a light fill behind
 * light text in the light theme and the current item vanished at a contrast
 * of 1.11 — the one item that most needs to be legible. */
#navbar .item.active,
#navbar .item:hover,
#navbar .item.active:hover {
	background: var(--azer-nav-hover);
	color: var(--azer-nav-ink);
	font-weight: 600;
}

.ui.button:hover,
.flex-item:hover {
	transform: none;
	box-shadow: none;
}

.flex-item:hover {
	background: var(--azer-band);
}

/* ── Repository names ─────────────────────────────────────────────────────
 * The one thing anyone came here to read.
 */
.flex-item-title {
	font-size: 1.04rem;
	letter-spacing: -0.004em;
}