/*
 * Re-points the frappe-ui design tokens (--surface-*, --ink-*, --outline-*) at the official
 * YourQuantix tokens loaded just before this file (brand/tokens.css).
 *
 * Both the Frappe Learning app (/lms) and the public Frappe pages (login) read these tokens, so this
 * single file skins both. No new palette is created: every colour below is a brand token, or a tint
 * of two brand tokens made with color-mix().
 */

/* Dark polarity of the brand, switched by the data-theme attribute Learning already sets. */
[data-theme="dark"] {
	--yq-bg: var(--yq-night);
	--yq-surface: var(--yq-night-surface);
	--yq-ink: var(--yq-night-ink);
	--yq-muted: var(--yq-night-muted);
	--yq-accent: var(--yq-night-accent);
	--yq-line: var(--yq-night-line);
}

/* :root:root outranks the :root rules of Frappe's own bundles, some of which load after this file. */
:root:root {
	color-scheme: light;

	/* Canvas and surfaces */
	--surface-base: var(--yq-bg);
	--surface-sidebar: var(--yq-surface-alt);
	--surface-gray-1: color-mix(in srgb, var(--yq-bg) 55%, var(--yq-surface-alt));
	--surface-gray-2: color-mix(in srgb, var(--yq-bg) 15%, var(--yq-surface-alt));
	--surface-gray-3: var(--yq-surface-alt);
	--surface-gray-4: color-mix(in srgb, var(--yq-surface-alt) 90%, var(--yq-ink));
	--surface-gray-5: color-mix(in srgb, var(--yq-surface-alt) 78%, var(--yq-ink));
	--surface-gray-6: color-mix(in srgb, var(--yq-surface-alt) 60%, var(--yq-ink));
	--surface-gray-7: var(--yq-muted);
	--surface-gray-8: var(--yq-action-hover);
	--surface-gray-9: var(--yq-action);
	/* Primary action: the solid Learning button is bg-surface-gray-10 with text-ink-base. */
	--surface-gray-10: var(--yq-action);

	/* Text */
	--ink-base: var(--yq-surface);
	--ink-gray-1: color-mix(in srgb, var(--yq-surface) 70%, var(--yq-muted));
	--ink-gray-2: color-mix(in srgb, var(--yq-surface) 55%, var(--yq-muted));
	--ink-gray-3: color-mix(in srgb, var(--yq-surface) 35%, var(--yq-muted));
	--ink-gray-4: var(--yq-muted);
	--ink-gray-5: var(--yq-muted);
	--ink-gray-6: var(--yq-muted);
	--ink-gray-7: color-mix(in srgb, var(--yq-muted) 55%, var(--yq-ink));
	--ink-gray-8: var(--yq-ink);
	--ink-gray-9: var(--yq-ink);

	/* Lines and focus */
	--outline-base: var(--yq-surface);
	--outline-gray-1: var(--yq-line);
	--outline-gray-2: var(--yq-line);
	--outline-gray-3: var(--yq-line-strong);
	--outline-gray-4: var(--yq-line-strong);
	--outline-gray-5: var(--yq-muted);
	--outline-gray-6: var(--yq-muted);
	--outline-gray-7: var(--yq-ink);
	--outline-gray-8: var(--yq-ink);
	--outline-gray-9: var(--yq-ink);

	/* Interactive blue of frappe-ui becomes the single brand accent family (teal). */
	--surface-blue-1: color-mix(in srgb, var(--yq-surface) 90%, var(--yq-accent));
	--surface-blue-2: color-mix(in srgb, var(--yq-surface) 80%, var(--yq-accent));
	--surface-blue-3: var(--yq-action);
	--ink-blue-1: color-mix(in srgb, var(--yq-surface) 85%, var(--yq-accent));
	--ink-blue-2: var(--yq-action);
	--ink-blue-3: var(--yq-action);
	--ink-blue-4: var(--yq-action);
	--ink-blue-5: var(--yq-action);
	--outline-blue-1: color-mix(in srgb, var(--yq-surface) 70%, var(--yq-accent));
	--outline-blue-2: var(--yq-accent);

	/* Frappe's amber badge ("0% completed") reads 3.55:1 with its own colours; lighten its fill, keep its hue. */
	--surface-amber-2: color-mix(in srgb, var(--surface-amber-1) 55%, var(--yq-surface));
	--ink-amber-7: var(--ink-amber-8);
}

html[data-theme="dark"]:root {
	color-scheme: dark;

	--surface-sidebar: var(--yq-surface);
	--surface-gray-1: var(--yq-surface);
	--surface-gray-2: color-mix(in srgb, var(--yq-surface) 88%, var(--yq-ink));
	--surface-gray-3: color-mix(in srgb, var(--yq-surface) 80%, var(--yq-ink));
	--surface-gray-4: color-mix(in srgb, var(--yq-surface) 72%, var(--yq-ink));
	--surface-gray-5: color-mix(in srgb, var(--yq-surface) 60%, var(--yq-ink));
	--surface-gray-6: color-mix(in srgb, var(--yq-surface) 45%, var(--yq-ink));
	--surface-gray-7: var(--yq-muted);
	/* On night, the primary action is cream with charcoal ink (brand rule, DESIGN.md section 7). */
	--surface-gray-8: color-mix(in srgb, var(--yq-ink) 88%, var(--yq-bg));
	--surface-gray-9: var(--yq-ink);
	--surface-gray-10: var(--yq-ink);

	--ink-base: var(--yq-bg);
	--ink-gray-1: color-mix(in srgb, var(--yq-surface) 70%, var(--yq-muted));
	--ink-gray-2: color-mix(in srgb, var(--yq-surface) 55%, var(--yq-muted));
	--ink-gray-3: color-mix(in srgb, var(--yq-surface) 35%, var(--yq-muted));
	--ink-gray-4: var(--yq-muted);
	--ink-gray-5: var(--yq-muted);
	--ink-gray-6: var(--yq-muted);
	--ink-gray-7: color-mix(in srgb, var(--yq-muted) 55%, var(--yq-ink));

	--outline-base: var(--yq-bg);
	--outline-gray-1: var(--yq-line);
	--outline-gray-2: var(--yq-line);
	--outline-gray-3: var(--yq-line);
	--outline-gray-4: var(--yq-line);
	--outline-gray-5: var(--yq-muted);
	--outline-gray-6: var(--yq-muted);

	--surface-blue-1: color-mix(in srgb, var(--yq-surface) 97%, var(--yq-accent));
	--surface-blue-2: color-mix(in srgb, var(--yq-surface) 95%, var(--yq-accent));
	--surface-blue-3: var(--yq-action);
	--ink-blue-1: color-mix(in srgb, var(--yq-surface) 80%, var(--yq-accent));
	--ink-blue-2: var(--yq-accent);
	--ink-blue-3: var(--yq-accent);
	--ink-blue-4: color-mix(in srgb, var(--yq-accent) 80%, var(--yq-ink));
	--ink-blue-5: color-mix(in srgb, var(--yq-accent) 80%, var(--yq-ink));
	--outline-blue-1: color-mix(in srgb, var(--yq-surface) 70%, var(--yq-accent));
	--outline-blue-2: var(--yq-accent);
}