/* Triq theme — Triq design tokens layered over the Forgejo dark theme.
 * Served by Forgejo from custom/public/assets/css/theme-triq.css and
 * selectable as DEFAULT_THEME = triq.
 */
@import url("theme-forgejo-dark.css");

:root {
	/* ---- Triq design tokens (spec §2) ---- */
	/* surfaces, darkest -> lightest */
	--triq-ink: #0a0d12;
	--triq-surface: #0d1218;
	--triq-panel: #101620;
	--triq-panel-hover: #131b26;
	--triq-line: rgba(255, 255, 255, 0.07);
	--triq-line-strong: rgba(255, 255, 255, 0.12);

	/* text */
	--triq-text: #eef2f6;
	--triq-text-2: rgba(230, 234, 239, 0.6);
	--triq-text-3: rgba(230, 234, 239, 0.45);
	--triq-text-4: rgba(230, 234, 239, 0.35);
	--triq-label: rgba(230, 234, 239, 0.58);

	/* accents */
	--triq-aqua: oklch(0.82 0.09 195); /* ~#63c9d8 */
	--triq-aqua-hi: oklch(0.88 0.09 195);
	--triq-aqua-ink: #07242a;
	--triq-sand: oklch(0.82 0.09 80); /* ~#d9b271 */

	/* status only */
	--triq-up: oklch(0.78 0.13 150);
	--triq-warn: oklch(0.82 0.09 80);
	--triq-down: oklch(0.62 0.19 25);

	/* ---- Fonts (spec §3) ---- */
	--fonts-override: "IBM Plex Sans";
	--fonts-proportional: "IBM Plex Sans", -apple-system, "Segoe UI", system-ui, sans-serif;
	--fonts-regular: "IBM Plex Sans", -apple-system, "Segoe UI", system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji";
	--fonts-monospace: "JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

	/* ---- Forgejo variable overrides ---- */
	/* primary = aqua; text on aqua fills = aqua-ink */
	--color-primary: #63c9d8;
	--color-primary-contrast: #07242a;
	/* NOTE: dark-theme convention (matches theme-forgejo-dark.css):
	 * dark-N gets LIGHTER (used for text/hover on dark), light-N gets
	 * DARKER (used as backgrounds, e.g. autofilled inputs). */
	--color-primary-dark-1: #74d1de;
	--color-primary-dark-2: #86d8e4;
	--color-primary-dark-3: #98dfe9;
	--color-primary-dark-4: #aae6ee;
	--color-primary-dark-5: #bdedf3;
	--color-primary-dark-6: #d3f3f8;
	--color-primary-dark-7: #e9fafc;
	--color-primary-light-1: #52bccc;
	--color-primary-light-2: #43aebf;
	--color-primary-light-3: #379eae;
	--color-primary-light-4: #2d8d9c;
	--color-primary-light-5: #237482;
	--color-primary-light-6: #1a5b66;
	--color-primary-light-7: #113f47;
	/* spec §6: filled-button hover is aqua-hi (lighter), not the ramp */
	--color-primary-hover: oklch(0.88 0.09 195);
	--color-primary-active: #52bccc;
	--color-primary-alpha-10: oklch(0.82 0.09 195 / 0.1);
	--color-primary-alpha-20: oklch(0.82 0.09 195 / 0.2);
	--color-primary-alpha-30: oklch(0.82 0.09 195 / 0.3);
	--color-primary-alpha-40: oklch(0.82 0.09 195 / 0.4);
	--color-primary-alpha-50: oklch(0.82 0.09 195 / 0.5);
	--color-primary-alpha-60: oklch(0.82 0.09 195 / 0.6);
	--color-primary-alpha-70: oklch(0.82 0.09 195 / 0.7);
	--color-primary-alpha-80: oklch(0.82 0.09 195 / 0.8);
	--color-primary-alpha-90: oklch(0.82 0.09 195 / 0.9);

	/* surfaces */
	--color-body: #0a0d12;
	--color-box-body: #101620;
	--color-box-body-highlight: #131b26;
	--color-box-header: #0d1218;
	--color-card: #101620;
	--color-menu: #0d1218;
	--color-nav-bg: #0d1218;
	--color-nav-hover-bg: rgba(255, 255, 255, 0.04);
	--color-header-wrapper: #0d1218;
	--color-secondary-bg: #101620;
	--color-hover: rgba(255, 255, 255, 0.05);
	--color-hover-opaque: #131b26;
	--color-active: rgba(255, 255, 255, 0.06);

	/* lines and borders — always 1px, always --triq-line */
	--color-secondary: rgba(255, 255, 255, 0.07);
	--color-secondary-alpha-40: rgba(255, 255, 255, 0.04);
	--color-secondary-alpha-50: rgba(255, 255, 255, 0.05);
	--color-secondary-alpha-60: rgba(255, 255, 255, 0.07);
	--color-secondary-alpha-70: rgba(255, 255, 255, 0.09);
	--color-secondary-alpha-80: rgba(255, 255, 255, 0.1);
	--color-secondary-alpha-90: rgba(255, 255, 255, 0.12);
	--color-light-border: rgba(255, 255, 255, 0.07);

	/* text */
	--color-text: #eef2f6;
	--color-text-dark: #eef2f6;
	--color-text-light: rgba(230, 234, 239, 0.75);
	--color-text-light-1: rgba(230, 234, 239, 0.6);
	--color-text-light-2: rgba(230, 234, 239, 0.45);
	--color-text-light-3: rgba(230, 234, 239, 0.35);

	/* inputs */
	--color-input-background: #0a0d12;
	--color-input-text: #eef2f6;
	--color-input-border: rgba(255, 255, 255, 0.07);
	--color-input-border-hover: rgba(255, 255, 255, 0.12);
	--color-input-focus-border: oklch(0.82 0.09 195 / 0.45);
	--color-input-placeholder: rgba(230, 234, 239, 0.35);

	/* status (real system status only) */
	--color-green: oklch(0.78 0.13 150);
	--color-red: oklch(0.62 0.19 25);
	--color-yellow: oklch(0.82 0.09 80);

	/* radii (spec §5: 8px buttons/nav, 11-12px cards) */
	--border-radius: 8px;
	--border-radius-medium: 11px;
}

/* ---- Type (spec §3): Space Grotesk for headings, tracked tight ---- */
h1,
h2,
h3,
.ui.header {
	font-family: "Space Grotesk", var(--fonts-regular);
	letter-spacing: -0.02em;
}

p {
	text-wrap: pretty;
}

/* ---- Motion (spec §9): 120ms ease-out on bg/border/color only ---- */
a,
button,
.ui.button,
.item {
	transition:
		background-color 120ms ease-out,
		border-color 120ms ease-out,
		color 120ms ease-out;
}

/* ---- Autofill guard: keep typed/autofilled input text readable ----
 * Forgejo core (index.css) paints autofill with
 * `.ui.form .field.field input:-webkit-autofill { box-shadow: 0 0 0 100px
 * var(--color-primary-light-6) inset !important }` — dark teal in this
 * theme. Both rules are !important, so we must match that selector's
 * specificity; this theme sheet loads after index.css, so a tie wins. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
.ui.form .field.field input:-webkit-autofill,
.ui.form .field.field input:-webkit-autofill:hover,
.ui.form .field.field input:-webkit-autofill:focus,
.ui.form .field.field input:-webkit-autofill:active {
	-webkit-text-fill-color: var(--color-input-text) !important;
	/* fill with the ink input background, matching non-autofilled fields */
	box-shadow: 0 0 0 100px var(--color-input-background) inset !important;
	border-color: var(--color-input-border) !important;
	caret-color: var(--color-input-text);
}

input:-webkit-autofill:focus,
.ui.form .field.field input:-webkit-autofill:focus {
	border-color: var(--color-input-focus-border) !important;
}

/* ---- Focus ring (spec §10) ---- */
:focus-visible {
	outline: none;
	border-color: oklch(0.82 0.09 195 / 0.45);
	box-shadow: 0 0 0 3px oklch(0.82 0.09 195 / 0.09);
}

/* ---- Homepage lockup (home.tmpl) ---- */
.triq-home {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 70vh;
	background: radial-gradient(90% 70% at 20% 15%, #16202c 0%, #0a0d12 70%);
}

.triq-lockup {
	display: flex;
	align-items: center;
	gap: 26px;
	color: var(--triq-aqua);
}

.triq-mark {
	width: 80px;
	height: 80px;
	flex-shrink: 0;
}

.triq-wordmark {
	font-family: "Space Grotesk", var(--fonts-regular);
	font-weight: 600;
	font-size: 46px;
	line-height: 1.08;
	letter-spacing: -0.03em;
	color: var(--triq-text);
	margin: 0;
}