/*
 * FDI Nexus design tokens (from the Figma "FDI LMS Forms Style Guide").
 *
 * The same values live in the Elementor kit (Site Settings > Global Colors /
 * Global Fonts). Change both together.
 */

:root {
	/* Colour */
	--fdi-navy: #004675;
	--fdi-teal: #00b1a8;
	--fdi-text: #000000;
	--fdi-grey: #7e7e7e;
	--fdi-surface: #ededed;
	--fdi-rule: #e2e2e2;
	--fdi-rule-strong: #c6c5c5;
	--fdi-white: #ffffff;

	/* Type */
	--fdi-font-heading: "PT Serif", Georgia, "Times New Roman", serif;
	--fdi-font-body: "Open Sans", Arial, Helvetica, sans-serif;

	/* Shape */
	--fdi-radius-pill: 999px;
	--fdi-radius-box: 20px;
	--fdi-input-height: 46px;
	--fdi-border: 1px solid var(--fdi-text);

	/* Tutor LMS reads these but never defines them (all themes). */
	--tutor-font-family-body: var(--fdi-font-body);
	--tutor-font-family-heading: var(--fdi-font-heading);
	--tutor-button-radius: var(--fdi-radius-pill);
	--tutor-input-radius: var(--fdi-radius-pill);
}

/* Multi-line fields are rounded boxes, not pills (Figma profile "Bio"). */
.tutor-text-area,
.tutor-wp-editor-container,
.tutor-file-uploader {
	--tutor-input-radius: var(--fdi-radius-box);
}

/*
 * Tutor builds its brand ramp from the brand colour (#00B1A8), but its fixed
 * lightness targets make the "darker" steps lighter than teal (700 = #09ecec),
 * so hovers and focus rings turn neon. Replace the ramp.
 *
 * LIGHT theme (also Tutor "system" theme on a light OS; the two blocks must
 * stay identical). Hover is navy, as in the style guide. Focus ring (450)
 * is a darker teal so it reaches 3:1 on Tutor's #fafafa surface.
 */
html:not([data-tutor-theme="dark"]):not([data-tutor-theme="system"]) {
	--tutor-brand-100: #e6f7f6;
	--tutor-brand-200: #b3e8e5;
	--tutor-brand-300: #80d8d4;
	--tutor-brand-400: #4dc8c2;
	--tutor-brand-450: #00968f;
	--tutor-brand-500: #1ab9b1;
	--tutor-brand-600: #00b1a8;
	--tutor-brand-700: #008f88;
	--tutor-brand-800: #00736e;
	--tutor-brand-900: #005b57;
	--tutor-brand-950: #003d3a;
	--tutor-button-primary: var(--fdi-teal);
	--tutor-button-primary-hover: var(--fdi-navy);
	--tutor-text-brand-hover: var(--fdi-navy);
	--tutor-icon-brand-hover: var(--fdi-navy);
	--tutor-color-primary: var(--fdi-teal);
	--tutor-color-primary-hover: var(--fdi-navy);
}

@media (prefers-color-scheme: light) {
	html[data-tutor-theme="system"] {
		--tutor-brand-100: #e6f7f6;
		--tutor-brand-200: #b3e8e5;
		--tutor-brand-300: #80d8d4;
		--tutor-brand-400: #4dc8c2;
		--tutor-brand-450: #00968f;
		--tutor-brand-500: #1ab9b1;
		--tutor-brand-600: #00b1a8;
		--tutor-brand-700: #008f88;
		--tutor-brand-800: #00736e;
		--tutor-brand-900: #005b57;
		--tutor-brand-950: #003d3a;
		--tutor-button-primary: var(--fdi-teal);
		--tutor-button-primary-hover: var(--fdi-navy);
		--tutor-text-brand-hover: var(--fdi-navy);
		--tutor-icon-brand-hover: var(--fdi-navy);
		--tutor-color-primary: var(--fdi-teal);
		--tutor-color-primary-hover: var(--fdi-navy);
	}
}

/*
 * DARK theme (Figma has no dark mode, but learners can pick it in Tutor
 * settings). Navy is unreadable on dark surfaces, so hovers stay teal and
 * brand text uses light teal. The two blocks must stay identical.
 */
html[data-tutor-theme="dark"] {
	--tutor-brand-400: #4dc8c2;
	--tutor-brand-450: #4dc8c2;
	--tutor-brand-500: #1ab9b1;
	--tutor-brand-600: #00b1a8;
	--tutor-brand-700: #008f88;
	--tutor-button-primary: var(--fdi-teal);
	--tutor-button-primary-hover: #008f88;
	--tutor-text-brand: #4dc8c2;
	--tutor-text-brand-hover: #80d8d4;
	--tutor-icon-brand: #4dc8c2;
	--tutor-icon-brand-hover: #80d8d4;
	--tutor-color-primary: var(--fdi-teal);
	--tutor-color-primary-hover: #008f88;
}

@media (prefers-color-scheme: dark) {
	html[data-tutor-theme="system"] {
		--tutor-brand-400: #4dc8c2;
		--tutor-brand-450: #4dc8c2;
		--tutor-brand-500: #1ab9b1;
		--tutor-brand-600: #00b1a8;
		--tutor-brand-700: #008f88;
		--tutor-button-primary: var(--fdi-teal);
		--tutor-button-primary-hover: #008f88;
		--tutor-text-brand: #4dc8c2;
		--tutor-text-brand-hover: #80d8d4;
		--tutor-icon-brand: #4dc8c2;
		--tutor-icon-brand-hover: #80d8d4;
		--tutor-color-primary: var(--fdi-teal);
		--tutor-color-primary-hover: #008f88;
	}
}

/*
 * Base layer for screens that are neither Elementor widgets nor Tutor's modern
 * app shell (legacy Tutor course page, login shortcode, course lists).
 * Bare element selectors only, so every Tutor/Elementor class rule still wins.
 */
body {
	font-family: var(--fdi-font-body);
	color: var(--fdi-text);
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: var(--fdi-font-heading);
}

a {
	color: var(--fdi-teal);
}

a:hover,
a:focus-visible {
	color: var(--tutor-text-brand-hover, var(--fdi-navy));
}