/*
 * The chrome's design tokens, named as Metronic 9 names its Tailwind theme (background, foreground, card, muted,
 * muted-foreground, secondary-foreground, border, input, ring, primary, mono, destructive), prefixed --ra- so three
 * products on one site never collide, scoped to the chrome's body class so no other admin screen sees them. The
 * values are Rooster One's (aieo-tokens.css), which the LMS ported as --rl-: the Metronic zinc scale. theme.css maps
 * them onto Tailwind's utility namespaces; the runtime adds --ra-product, --ra-sec and --ra-persona per product and
 * section (Colour::css()).
 *
 * Dark (0.24.0): every token that has a dark twin is one light-dark() pair, and the body class picks the scheme:
 * light by default, `rooster-admin-dark` for dark, `rooster-admin-scheme-auto` for the device's (the user's
 * preference, Prefs::THEME, printed by Library::body_class()). The few rules a token swap cannot cover use the
 * `dark` variant (chrome.css). wp-admin's own menu and bar keep their colour scheme.
 */

/* 0.65.1: and a library table's island on an admin screen without the chrome (Ui::table()'s `island`). */
.rooster-admin-has-chrome,
.rooster-admin-island {
	/* The accent of every interactive piece (0.45.0, the owner: the colour of the menu section a control belongs to):
	   the screen's section (Colour::css() sets --ra-screen-sec-ink on the body), else the product. An element of a
	   section redeclares it with its own colour (Colour::css(), the section classes), and with it the focus shadow. */
	--ra-accent: var(--ra-screen-sec-ink, var(--ra-product-ink));
	--ra-accent-on: var(--ra-screen-sec-on, var(--ra-product-on));

	color-scheme: light;

	/* The page around the chrome: wp-admin's grey in light, the chrome's own in dark. */
	--ra-page: light-dark(#f0f0f1, #0c0c0e);

	/* Surfaces and text. */
	--ra-background: light-dark(#fff, #09090b);
	--ra-foreground: light-dark(#09090b, #fafafa);
	--ra-card: light-dark(#fff, #09090b);
	--ra-card-foreground: light-dark(#09090b, #fafafa);
	--ra-muted: light-dark(#f4f4f5, #18181b);
	--ra-muted-foreground: light-dark(#a1a1aa, #52525b);
	--ra-secondary-foreground: light-dark(#52525b, #a1a1aa);
	--ra-border: light-dark(#ececee, #27272a);
	--ra-input: light-dark(#e4e4e7, #27272a);
	/* A control's boundary (0.65.9, Rooster One's request 42, WCAG 1.4.11: 3:1 against what it sits on): an unchecked
	   box's or radio's border, an off switch's ring; 0.66.0 (request 43) a field's border (an input, a select, a
	   textarea, the combobox, a colour's swatch). 3.66:1 on the card, 3.21:1 on the page; 4.12:1 and 3.67:1 dark
	   (ContrastTest checks them). Buttons, pills and a segmented group keep the input token: their words name them. */
	--ra-control-border: light-dark(#85858e, #71717a);
	--ra-ring: light-dark(#a1a1aa, #52525b);
	--ra-mono: light-dark(#09090b, #d4d4d8);
	--ra-link: light-dark(
		var(--wp-admin-theme-color, #2271b1),
		#60a5fa
	); /* the user's admin colour scheme: links and the focus ring, where the product colour is not the point */
	--ra-ink: light-dark(#002147, #e4e4e7);
	--ra-brand-dark: light-dark(#212222, #fafafa);

	/* Variants: solid, soft (Metronic's light), and the text on each. */
	--ra-primary: light-dark(#3b82f6, #60a5fa);
	--ra-primary-foreground: light-dark(#fff, #0b1120);
	--ra-primary-soft: light-dark(#dbeafe, #172554);
	--ra-primary-soft-foreground: light-dark(#1e40af, #60a5fa);
	--ra-success: light-dark(#16a34a, #22c55e);
	--ra-success-soft: light-dark(#dcfce7, #052e16);
	--ra-success-wash: light-dark(#f0fdf4, #0d1a12);
	--ra-success-foreground: light-dark(#166534, #4ade80);
	--ra-success-on: #052e16; /* the text on a solid success fill: dark in both schemes (white on the green reads at 3.3:1 only) */
	--ra-warning: light-dark(#d97706, #f59e0b);
	--ra-warning-soft: light-dark(#fff8e8, #1f1a0d);
	--ra-warning-soft-foreground: light-dark(
		#c2410c,
		#facc15
	); /* orange, never brown (0.46.8): 4.9:1 on the warning wash */
	--ra-warning-border: light-dark(#f5d27a, #713f12);
	--ra-warning-on: #1f1a0d; /* the text on a solid warning fill: dark in both schemes */
	--ra-destructive: light-dark(#d63638, #ef4444);
	--ra-destructive-on: light-dark(#fff, #09090b); /* the text on a solid destructive fill */
	/* Destructive text on a surface (0.46.7): a row action, an error, a required mark. The fill's red reads at 4.6:1 on
	   white only, 4.2:1 on a selected or hovered row; this one at 5.5:1 there (the fill 85 % with black, 70 % with white
	   in the dark, as the destructive tone's text always was). */
	--ra-destructive-foreground: light-dark(#b62e30, #f47c7c);
	--ra-info: light-dark(#6d28d9, #8b5cf6);
	--ra-info-on: light-dark(#fff, #09090b); /* the text on a solid info fill */
	--ra-info-soft: light-dark(#ede9fe, #2e1065);
	--ra-info-wash: light-dark(#f5f3ff, #16121f);

	/* The chrome's own accents. */
	--ra-icon-manual: #d63638;
	--ra-icon-help: #00a32a;
	--ra-icon-feedback: #dba617;
	--ra-icon-chat: #7360f2; /* the community chat (0.20.0) */
	--ra-icon-welcome: #2f6fd6;
	--ra-icon-survey: #0e9f8f;

	/* The charts' series (0.22.0): the product's ink first, then the tones; a product may override from Colour::css(). */
	--ra-chart-1: var(--ra-product-ink);
	--ra-chart-2: light-dark(#16a34a, #22c55e);
	--ra-chart-3: light-dark(#d97706, #f59e0b);
	--ra-chart-4: light-dark(#7c3aed, #a78bfa);
	--ra-chart-5: light-dark(#0ea5e9, #38bdf8);
	--ra-chart-6: light-dark(#db2777, #f472b6);
	--ra-intro-bg: light-dark(rgb(102 116 192 / 13%), rgb(102 116 192 / 20%));
	--ra-links-bg: light-dark(rgb(237 220 238 / 25%), rgb(237 220 238 / 8%));
	--ra-ai-bg: light-dark(#141413, #1f1f1e);
	--ra-ai-spark: #d97757;

	/* Type: wp-admin's pixel scale (theme.css puts it on text-*). */
	--ra-text-2xs: 11px;
	--ra-leading-2xs: 1.5;
	--ra-text-xs: 12px;
	--ra-leading-xs: 1.5;
	--ra-text-sm: 13px;
	--ra-leading-sm: 1.4;
	--ra-text-base: 14px;
	--ra-leading-base: 1.4;
	--ra-text-md: 15px;
	--ra-leading-md: 1.3;
	--ra-text-lg: 16px;
	--ra-leading-lg: 1.35;
	--ra-text-xl: 18px;
	--ra-leading-xl: 1.3;
	--ra-text-2xl: 20px;
	--ra-leading-2xl: 1.3;
	--ra-text-3xl: 24px;
	--ra-leading-3xl: 34px;

	/* Fonts: wp-admin's own stacks. */
	--ra-font-sans:
		-apple-system, blinkmacsystemfont, "Segoe UI", roboto, oxygen-sans, ubuntu, cantarell, "Helvetica Neue",
		sans-serif;
	--ra-font-mono: consolas, monaco, monospace;

	/* Shape: the scale, and the roles the recipes read (a button, a control, a card, a badge, a chip, a dialog). */
	--ra-radius-sm: 4px;
	--ra-radius-md: 6px;
	--ra-radius-lg: 8px;
	--ra-radius-xl: 12px;
	--ra-radius-2xl: 14px;
	--ra-shape-button: var(--ra-radius-md);
	--ra-shape-control: var(--ra-radius-md);
	--ra-shape-card: var(--ra-radius-lg);
	--ra-shape-badge: var(--ra-radius-md);
	--ra-shape-chip: 9999px;
	--ra-shape-dialog: var(--ra-radius-xl);

	/* Shadows. */
	--ra-shadow-sm: 0 1px 2px rgb(0 0 0 / 5%);
	--ra-shadow-bar: 0 1px 2px rgb(0 0 0 / 8%);
	--ra-shadow-pop: 0 10px 28px rgb(0 0 0 / 12%), 0 2px 6px rgb(0 0 0 / 6%);
	--ra-shadow-modal: 0 24px 60px rgb(0 0 0 / 25%);
	--ra-shadow-focus: 0 0 0 1px var(--ra-accent);
	/* The check's and the dash's shapes (masks: the colour is the accent's on-colour). */
	--ra-check: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 0 1 0 1.414l-5 5a1 1 0 0 1-1.414 0l-2-2a1 1 0 0 1 1.414-1.414L6.5 9.086l4.293-4.293a1 1 0 0 1 1.414 0z'/%3e%3c/svg%3e");
	--ra-dash: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M4 8a1 1 0 0 1 1-1h6a1 1 0 1 1 0 2H5a1 1 0 0 1-1-1z'/%3e%3c/svg%3e");
	--ra-shadow-focus-destructive: 0 0 0 1px var(--ra-destructive);
	/* The select's chevron (0.45.4; Lucide's chevron-down, and -up while the list is open): a background image, so the
	   native select and the combobox draw it alike; an image takes no light-dark(), so the dark schemes repeat it in
	   their muted foreground. */
	--ra-chevron: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a1a1aa' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='m6 9 6 6 6-6'/%3e%3c/svg%3e");
	--ra-chevron-up: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a1a1aa' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='m18 15-6-6-6 6'/%3e%3c/svg%3e");

	/* The chevron's shape as a mask (0.75.1): painted in the muted colour where the browser lets a page draw a select's
	   icon (`appearance: base-select`) and on the combobox's control and the calendar's button, so it follows the scheme;
	   the images above stay the fallback of a native select elsewhere. */
	--ra-chevron-mask: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='m6 9 6 6 6-6'/%3e%3c/svg%3e");

	/* Layers: the sticky bar under core's side menu (#adminmenuwrap is 9990), the popovers, tips and toasts above all. */
	--ra-z-sticky: 9980;
	--ra-z-pop: 100000;
	--ra-z-tip: 100001;
	--ra-z-toast: 100002;
	--ra-z-modal: 100000; /* a modal that is a positioned element, not a <dialog> in the top layer: above core's admin bar (99999) */

	/* Motion. */
	--ra-dur-fast: 120ms;
	--ra-dur: 150ms;
	--ra-dur-slow: 200ms;
	--ra-ease: ease;

	/* Rhythm: the spacing unit, the gap between the chrome and the page, the label column. */
	--ra-spacing: 4px;
	--ra-page-gap: 24px;
	--ra-label-w: 16rem;
	--ra-panel-w: 20rem; /* the side panel, docked or as a drawer (0.46.0) */
	--ra-gap-card: 20px; /* between cards, across and down: the board, its bands and stacks (0.58.0, Metronic note F6) */

	/* The product (Colour::css() sets --ra-product, --ra-product-ink, --ra-product-on; these are the fallbacks). */
	--ra-product: #1e63ce;
	--ra-product-ink: light-dark(#184fa6, #7fb0f5);
	--ra-product-on: light-dark(#fff, #09090b);
}

.rooster-admin-has-chrome.rooster-admin-dark {
	color-scheme: dark;
	--ra-chevron: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2352525b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='m6 9 6 6 6-6'/%3e%3c/svg%3e");
	--ra-chevron-up: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2352525b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='m18 15-6-6-6 6'/%3e%3c/svg%3e");
}

.rooster-admin-has-chrome.rooster-admin-scheme-auto {
	color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
	.rooster-admin-has-chrome.rooster-admin-scheme-auto {
		--ra-chevron: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2352525b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='m6 9 6 6 6-6'/%3e%3c/svg%3e");
		--ra-chevron-up: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2352525b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='m18 15-6-6-6 6'/%3e%3c/svg%3e");
	}
}