/*
 * Shared Atelier design tokens for the dashboard, account and auth screens.
 * Page stylesheets alias their own variables to these; set values here only.
 */
:root {
	--ui-paper: #f2f0e3;
	--ui-paper-warm: #ebe2ce;
	--ui-paper-dark: #ddd2b6;
	--ui-surface: #faf7ef;
	--ui-input: #fffdf8;
	--ui-ink: #15140f;
	--ui-ink-soft: #2a2620;
	--ui-muted: #5a5448;
	--ui-faint: #8b8676;
	--ui-line: rgba(21, 20, 15, 0.23);
	--ui-line-soft: rgba(21, 20, 15, 0.12);
	--ui-accent: #ed6f5c;
	--ui-accent-soft: #f08e7c;
	--ui-accent-tint: rgba(237, 111, 92, 0.14);
	/* Small text links ("have an account? log in") stay conventional blue, not the brand accent. */
	--ui-link: #1d5fc4;
	--ui-success: #267344;
	--ui-danger: #b42318;

	--ui-font-display: "Inter Tight", "Alexandria", sans-serif;
	--ui-font-body: "Inter", "IBM Plex Sans Arabic", sans-serif;
	--ui-font-mono: "JetBrains Mono", "IBM Plex Mono", monospace;

	--ui-radius-sm: 8px;
	--ui-radius-md: 12px;
	--ui-radius-lg: 16px;
	--ui-radius-pill: 999px;

	--ui-shadow-card: 0 18px 48px rgba(86, 58, 39, 0.12);
	--ui-shadow-accent: 0 10px 26px rgba(237, 111, 92, 0.2);
	--ui-focus-ring: 0 0 0 3px rgba(237, 111, 92, 0.18);
}

/* custom.css forces Cairo on body site-wide; these screens use Atelier type. */
body.cw-ui {
	--f-display: var(--ui-font-display);
	--f-sub: var(--ui-font-display);
	--f-body: var(--ui-font-body);
	font-family: var(--ui-font-body) !important;
}

body.cw-ui :is(input, select, textarea, button) {
	font-family: inherit;
}

/* custom.css also forces Cairo on Tutor and submit buttons with !important. */
body.cw-ui :is(.tutor-btn, button[type="submit"], input[type="submit"], input[type="button"]) {
	font-family: inherit !important;
}

/*
 * Tutor prints its brand scale from the gold "primary colour" setting.
 * Override at the root so Tutor's derived variables resolve to terracotta.
 */
html:has(> body.cw-ui) {
	/* Parent-theme fonts, set to Cairo at the root by localization.php. */
	--heading-font: var(--ui-font-display) !important;
	--body-font: var(--ui-font-body) !important;
	--tutor-color-primary: var(--ui-accent) !important;
	--tutor-primary: var(--ui-accent) !important;
	--tutor-brand-100: #fef5f3;
	--tutor-brand-200: #fde8e4;
	--tutor-brand-300: #fbd9d2;
	--tutor-brand-400: #f6b3a7;
	--tutor-brand-450: #f3a191;
	--tutor-brand-500: #f08e7c;
	--tutor-brand-600: #ed6f5c;
	--tutor-brand-700: #d85d4a;
	--tutor-brand-800: #b84b3a;
	--tutor-brand-900: #8f3a2d;
	--tutor-brand-950: #5c261d;
}