/* =====================================================================
   GNA Sense theme for Gitea

   Mirrors the website's css/styles.css: a light, paper-coloured surface
   with navy text, navy primary buttons, and teal reserved for accents
   and links. Fonts and the 4px radius come straight from the site.

   Overrides Gitea's CSS custom properties rather than defining a new
   theme: a standalone theme file must redeclare every variable Gitea
   uses, so an upgrade that introduces new ones renders broken. This way
   the built-in theme stays the base and only the brand surface changes.

   Colours are only applied to the light theme, which is the default.
   Anyone who prefers gitea-dark in their own settings still gets a
   working dark UI rather than a half-branded one.
   ===================================================================== */

:root {
	--gna-navy: #0B2340;
	--gna-navy-deep: #071A30;
	--gna-navy-hover: #12325A;
	--gna-teal: #2FA79C;
	--gna-teal-light: #7FD1C7;
	--gna-paper: #F6F8F8;
	--gna-ink-2: #3D4F63;
	--gna-line: #DCE3E6;

	/* Typography and shape apply to every theme - they are brand, not palette. */
	--fonts-proportional: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
	--fonts-monospace: "JetBrains Mono", ui-monospace, Consolas, monospace;
	--border-radius: 4px;
	--border-radius-medium: 4px;
	--border-radius-large: 6px;
}

[data-theme="gitea-light"] {
	/* --- primary: navy, matching .btn--primary on the site --- */
	--color-primary: var(--gna-navy);
	--color-primary-contrast: #ffffff;
	--color-primary-hover: var(--gna-navy-hover);
	--color-primary-active: var(--gna-navy-deep);
	--color-primary-dark-1: #0A1F39;
	--color-primary-dark-2: var(--gna-navy-deep);
	--color-primary-dark-3: #06172B;
	--color-primary-dark-4: #051426;
	--color-primary-dark-5: #041121;
	--color-primary-dark-6: #030E1B;
	--color-primary-dark-7: #020B16;
	--color-primary-light-1: var(--gna-navy-hover);
	--color-primary-light-2: #1A4272;
	--color-primary-light-3: #23528A;
	--color-primary-light-4: #3D6DA6;
	--color-primary-light-5: #6E93BF;
	--color-primary-light-6: #A7C0D8;
	--color-primary-light-7: #D7E2EC;
	--color-primary-alpha-10: rgba(11, 35, 64, 0.1);
	--color-primary-alpha-20: rgba(11, 35, 64, 0.2);
	--color-primary-alpha-30: rgba(11, 35, 64, 0.3);
	--color-primary-alpha-40: rgba(11, 35, 64, 0.4);
	--color-primary-alpha-50: rgba(11, 35, 64, 0.5);
	--color-primary-alpha-60: rgba(11, 35, 64, 0.6);
	--color-primary-alpha-70: rgba(11, 35, 64, 0.7);
	--color-primary-alpha-80: rgba(11, 35, 64, 0.8);
	--color-primary-alpha-90: rgba(11, 35, 64, 0.9);

	/* --- surfaces --- */
	--color-body: var(--gna-paper);
	--color-box-body: #ffffff;
	--color-box-body-highlight: #fbfcfc;
	--color-box-header: #ffffff;
	--color-header-wrapper: #ffffff;
	--color-nav-bg: #ffffff;
	--color-nav-hover-bg: var(--gna-paper);
	--color-footer: var(--gna-paper);
	--color-menu: #ffffff;
	--color-card: #ffffff;
	--color-secondary-bg: var(--gna-paper);
	--color-code-bg: var(--gna-paper);
	--color-markup-code-block: var(--gna-paper);
	--color-input-background: #ffffff;
	--color-project-column-bg: var(--gna-paper);
	--color-editor-line-highlight: #eef3f5;

	/* --- lines --- */
	--color-secondary: var(--gna-line);
	--color-secondary-dark-1: #CBD6DB;
	--color-secondary-dark-2: #B9C7CE;
	--color-secondary-light-1: #E8EDEF;
	--color-light-border: var(--gna-line);
	--color-input-border: var(--gna-line);
	--color-input-border-hover: var(--gna-teal);
	--color-hover: rgba(47, 167, 156, 0.08);
	--color-active: rgba(47, 167, 156, 0.14);
	--color-shadow: rgba(11, 35, 64, 0.1);

	/* --- text --- */
	--color-text: var(--gna-navy);
	--color-text-dark: var(--gna-navy-deep);
	--color-text-light: var(--gna-ink-2);
	--color-text-light-1: #4E617A;
	--color-text-light-2: #5F7288;
	--color-text-light-3: #718496;
	--color-input-text: var(--gna-navy);
	--color-placeholder-text: #8A9AAB;
	--color-nav-text: var(--gna-navy);
}

/* The site's header is a plain paper bar with a hairline under it. */
[data-theme="gitea-light"] #navbar {
	border-bottom: 1px solid var(--gna-line);
}

/* Teal is the site's accent for links and labels, never for buttons. */
[data-theme="gitea-light"] a:not(.ui.button):not(.item):not(.label) {
	color: #1F7A72;
}
[data-theme="gitea-light"] a:not(.ui.button):not(.item):not(.label):hover {
	color: var(--gna-teal);
}

/* .label on the site: JetBrains Mono, uppercase, wide tracking, teal. */
[data-theme="gitea-light"] .repo-title .labelled,
[data-theme="gitea-light"] .ui.header .sub.header {
	font-family: var(--fonts-monospace);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	font-size: 12px;
}

/* Primary buttons: navy with white text, exactly like .btn--primary. */
[data-theme="gitea-light"] .ui.primary.button,
[data-theme="gitea-light"] .ui.primary.buttons .button {
	background: var(--gna-navy);
	color: #ffffff;
	font-weight: 600;
}
[data-theme="gitea-light"] .ui.primary.button:hover,
[data-theme="gitea-light"] .ui.primary.buttons .button:hover {
	background: var(--gna-navy-hover);
	color: #ffffff;
}

/* Green "new repository"-style actions become the teal accent button. */
[data-theme="gitea-light"] .ui.green.button,
[data-theme="gitea-light"] .ui.positive.button {
	background: var(--gna-teal);
	color: var(--gna-navy-deep);
	font-weight: 600;
}
[data-theme="gitea-light"] .ui.green.button:hover,
[data-theme="gitea-light"] .ui.positive.button:hover {
	background: var(--gna-teal-light);
	color: var(--gna-navy-deep);
}