/*
 * AEON Akademi Desk theme (admin branding level 1, issue #71). Colours, fonts, radii and the
 * logo only: Desk's layout is not restyled. Loaded on every Desk page through `app_include_css`
 * and on the login page through `web_include_css` (hooks.py). The learner PWA at /akademi has its
 * own shell and never loads this file.
 *
 * Values mirror frontend/src/ui/tokens.css (design system sections 2-4, binding). Contrast:
 * white on #B41E8E 5.97:1, #7E1563 on white 9.66:1, #36004C on white 16.65:1 (all AA, v2.2 2.1).
 * Desk variables mapped here (frappe e8d41dd): --primary, --btn-primary and --primary-color
 * (css/espresso/legacy.css:58,118,131), the Espresso solid button vars on .es-button
 * (css/espresso/components/button.css:34-37), --font-stack (scss/espresso/_typography.scss:12),
 * --radius / --radius-lg (css/espresso/radius.css).
 */
@font-face {
	font-family: 'Plus Jakarta Sans';
	font-style: normal;
	font-weight: 200 800;
	font-display: swap;
	src: url('/assets/aeon_akademi/frontend/fonts/plus-jakarta-sans-latin-wght.woff2') format('woff2');
}

:root,
[data-theme='light'] {
	--aeon-primary: #b41e8e; /* tokens.css --color-primary */
	--aeon-primary-active: #7e1563; /* --color-primary-active: pressed, small magenta text */
	--aeon-primary-soft: #f8e6f2; /* --color-primary-soft */
	--aeon-deep: #36004c; /* --color-brand-deep: sidebar and header accents */
	--aeon-on-primary: #ffffff;
	--aeon-font-text: 'Plus Jakarta Sans', Inter, Roboto, system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
	--aeon-font-display: var(--aeon-font-text);

	--primary: var(--aeon-primary);
	--brand-color: var(--aeon-primary);
	--primary-color: var(--aeon-primary-active);
	--btn-primary: var(--aeon-primary);
	--progress-bar-bg: var(--aeon-primary);
	--font-stack: var(--aeon-font-text);
	--radius: 8px; /* --radius-sm: inputs, chips */
	--radius-lg: 12px; /* --radius-md: cards, tiles */
}

/* Espresso solid buttons (login "Continue", dialogs). The red theme keeps its own colours. */
.es-button:not([data-theme='red']) {
	--bt-solid-bg: var(--aeon-primary);
	--bt-solid-bg-hover: var(--aeon-primary-active);
	--bt-solid-bg-active: var(--aeon-primary-active);
	--bt-solid-fg: var(--aeon-on-primary);
}

/* Bootstrap primary buttons (Save, New). */
.btn.btn-primary {
	background-color: var(--aeon-primary);
	border-color: var(--aeon-primary);
	color: var(--aeon-on-primary);
}
.btn.btn-primary:hover,
.btn.btn-primary:focus,
.btn.btn-primary:active,
.btn.btn-primary:not(:disabled):not(.disabled):active {
	background-color: var(--aeon-primary-active);
	border-color: var(--aeon-primary-active);
	color: var(--aeon-on-primary);
}

/* Headings use the display face (spec 3). */
h1,
h2,
h3,
.page-title .title-text,
.sidebar-header .header-title,
.page-card-head h4 {
	font-family: var(--aeon-font-display);
}

/* Sidebar and header accents in deep purple (on white: 16.65:1). */
.body-sidebar .sidebar-header .header-title,
.body-sidebar .active-sidebar .sidebar-item-label {
	color: var(--aeon-deep);
}
.body-sidebar .active-sidebar .sidebar-item-icon {
	--icon-stroke: var(--aeon-deep);
	color: var(--aeon-deep);
}
.body-sidebar .active-sidebar {
	box-shadow: inset 3px 0 0 var(--aeon-primary), var(--shadow-sm);
}

/* Login page: the AEON mark sits on its own; the placeholder logo is square. */
.page-card-head .app-logo {
	border-radius: var(--radius-lg);
}

/*
 * Public web pages (the /sijil/<code> verify page, PRD CRT-3): Frappe's footer line prints the
 * "powered by" value in --text-light (= --ink-gray-5 = $gray-600 #7C7C7C, frappe
 * public/css/espresso/colors.css:334 and scss/espresso/_colors.scss:21). At 14px on white that
 * is 4.17:1, below the 4.5:1 AA floor for body text (WCAG 1.4.3), and axe reported it as the one
 * serious violation left on the verify page (#267 item 2, UAT A41).
 *
 * #525252 on white is 7.81:1. It is the same neutral ramp one step darker ($gray-700, frappe
 * scss/espresso/_colors.scss), so the footer keeps looking like a footer and only the contrast
 * changes. Scoped to `.web-footer .footer-powered`, so no Desk text is restyled.
 */
.web-footer .footer-powered {
	color: #525252;
}

/* Website navbar brand (Website Settings brand_html, setup/branding.py): the official logo at
 * the cap height of the word, like the learner app's ABrandMark. */
.navbar-brand .aeon-brand-logo {
	display: inline-block;
	height: 1.5rem;
	width: auto;
	vertical-align: middle;
}
.navbar-brand .aeon-brand-word {
	margin-left: 0.4em;
	vertical-align: middle;
	font-weight: 700;
	color: var(--aeon-deep);
}