/**
 * Desktop Mode — CSS Custom Properties.
 *
 * All design tokens for the desktop shell. Per-scheme blocks below
 * retune the accent + titlebar colors to match the user's WordPress
 * admin color scheme — the shell root gets a `data-desktop-mode-scheme`
 * attribute in PHP so the right block wins before first paint.
 *
 * Palette source: wp-admin/css/colors/<scheme>/colors.scss in Core.
 * We read the `base` color as the focused title bar background (same
 * visual weight as the admin sidebar the user is used to) and the
 * `highlight` color as `--wp-admin-theme-color`, which Core publishes
 * as the accent — buttons, tabs, focus rings.
 *
 * @since 6.9.0
 */

:root {
	/* Desktop area */
	--desktop-mode-bg: linear-gradient(135deg, #1d2327 0%, #2c3338 50%, #1d2327 100%);
	--desktop-mode-area-inset: 0;

	/* Window chrome */
	--desktop-mode-window-bg: #fff;
	--desktop-mode-window-border: rgba(0, 0, 0, 0.12);
	--desktop-mode-window-radius: 8px;
	--desktop-mode-window-shadow: 0 8px 32px rgba(0, 0, 0, 0.3), 0 2px 8px rgba(0, 0, 0, 0.15);
	--desktop-mode-window-shadow-focused: 0 12px 48px rgba(0, 0, 0, 0.4), 0 4px 12px rgba(0, 0, 0, 0.2);

	/* Title bar — focused bg/color resolve via the scheme overrides below. */
	--desktop-mode-titlebar-bg: #f0f0f1;
	--desktop-mode-titlebar-bg-focused: var(--wp-admin-theme-color, #2271b1);
	--desktop-mode-titlebar-color: #50575e;
	--desktop-mode-titlebar-color-focused: #fff;
	--desktop-mode-titlebar-height: 40px;

	/* Admin accent. Each scheme block below retunes this; the fallback
	 * matches the legacy hardcoded value so nothing regresses if the
	 * root has no data-desktop-mode-scheme attribute (e.g. tests). */
	--wp-admin-theme-color: #2271b1;

	/* Resize handle — larger hit area than visual glyph; corners
	   are transparent until hover so they don't compete with the
	   window's own drop shadow.  */
	--desktop-mode-resize-size: 20px;
	--desktop-mode-resize-color: rgba(0, 0, 0, 0.15);

	/* Dock */
	--desktop-mode-dock-width: 56px;
	--desktop-mode-dock-icon-size: 20px;
	--desktop-mode-dock-bg: rgba(0, 0, 0, 0.4);
	--desktop-mode-dock-border: rgba(255, 255, 255, 0.08);

	/*
	 * File tiles — anywhere a `.desktop-mode-file-tile` (or sibling
	 * canvas tile) renders. The defaults below match the wallpaper
	 * (dark gradient → white text + soft white hover). Light-on-dark
	 * surfaces override these in their own scope, e.g.:
	 *
	 *   .desktop-mode-folder-window {
	 *       --desktop-mode-tile-fg: #1d2327;
	 *       --desktop-mode-tile-hover-bg: rgba(0, 0, 0, 0.06);
	 *   }
	 *
	 * Plugin authors can override any of these in their own theme
	 * to retint tiles globally without touching the rules below.
	 *
	 * @since 0.8.0
	 */
	--desktop-mode-tile-fg: var(--desktop-mode-fg, #fff);
	--desktop-mode-tile-fg-muted: rgba(255, 255, 255, 0.7);
	--desktop-mode-tile-hover-bg: rgba(255, 255, 255, 0.12);
	--desktop-mode-tile-focus-ring: var(--wp-admin-theme-color, #2271b1);
	--desktop-mode-tile-shortcut-bg: rgba(0, 0, 0, 0.65);
	--desktop-mode-tile-shortcut-fg: #fff;
	--desktop-mode-tile-shortcut-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);

	/*
	 * Label rendering tokens. Defaults match the dark wallpaper:
	 * a soft drop-shadow boosts legibility against the gradient,
	 * regular weight, default antialiasing.
	 *
	 * Light-context surfaces (folder windows, My WordPress, any
	 * future window with a light body) rebind these in their own
	 * scope so tile labels render with the same crispness as the
	 * surrounding chrome — no per-surface duplicate rules.
	 *
	 * @since 0.8.0
	 */
	--desktop-mode-tile-label-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
	--desktop-mode-tile-label-weight: 400;
	--desktop-mode-tile-label-smoothing: auto;
	--desktop-mode-tile-label-color: var(--desktop-mode-tile-fg);

	/* Z-index layers */
	--desktop-mode-z-base: 100;
	--desktop-mode-z-dock: 200;
	--desktop-mode-z-adminbar: 9991;
	--desktop-mode-z-fullscreen: 99999;
}

/*
 * Per-scheme overrides. Scoped to `.desktop-mode-shell[data-desktop-mode-scheme]`
 * so the variables only affect the shell subtree — we don't want to touch
 * Gutenberg or other nested contexts that also read `--wp-admin-theme-color`.
 *
 * Setting the vars on the shell root means any descendant (title bar,
 * dock chip, tab underlines, focus rings) that references them inherits
 * the right hue without further plumbing.
 *
 * Title bar bg deliberately differs from the WP admin bar (which uses
 * each scheme's "base" color) — when the two sit edge-to-edge the
 * shared hue reads as one slab. We mix base with white (dark schemes)
 * or black (light schemes) ~15–20% so the titlebar feels related but
 * clearly distinct.
 */

/*
 * The focused titlebar colors below are the pre-computed sRGB result
 * of each scheme's base color mixed with white (dark schemes) or
 * black (light schemes). We used to write these as
 * `color-mix(in srgb, …)` calls, but `color-mix()` only shipped in
 * Chrome 111 — on older Chromium-based browsers the whole declaration
 * is invalid-at-computed-value-time and the titlebar falls back to
 * the unfocused light surface, which hides the white control glyphs.
 * Since the mix inputs are all static there is no behavioral loss
 * from inlining the resulting hex value.
 */

/* Fresh — default WP blue. */
.desktop-mode-shell[data-desktop-mode-scheme="fresh"] {
	--wp-admin-theme-color: #2271b1;
	/* color-mix(in srgb, #1d2327 80%, #fff 20%) */
	--desktop-mode-titlebar-bg-focused: #4a4f52;
	--desktop-mode-titlebar-color-focused: #fff;
}

/* Light — pale sidebar, teal accent. */
.desktop-mode-shell[data-desktop-mode-scheme="light"] {
	--wp-admin-theme-color: #04a4cc;
	/* color-mix(in srgb, #e5e5e5 85%, #000 15%) */
	--desktop-mode-titlebar-bg-focused: #c3c3c3;
	--desktop-mode-titlebar-color-focused: #333;
}

/* Modern — vivid indigo accent, near-black sidebar. */
.desktop-mode-shell[data-desktop-mode-scheme="modern"] {
	--wp-admin-theme-color: #3858e9;
	/* color-mix(in srgb, #1e1e1e 78%, #fff 22%) */
	--desktop-mode-titlebar-bg-focused: #505050;
	--desktop-mode-titlebar-color-focused: #f3f1f1;
}

/* Blue. */
.desktop-mode-shell[data-desktop-mode-scheme="blue"] {
	--wp-admin-theme-color: #096484;
	/* color-mix(in srgb, #096484 82%, #fff 18%) */
	--desktop-mode-titlebar-bg-focused: #35809a;
	--desktop-mode-titlebar-color-focused: #e5f8ff;
}

/* Coffee. */
.desktop-mode-shell[data-desktop-mode-scheme="coffee"] {
	--wp-admin-theme-color: #c7a589;
	/* color-mix(in srgb, #46403c 80%, #fff 20%) */
	--desktop-mode-titlebar-bg-focused: #6b6663;
	--desktop-mode-titlebar-color-focused: #ece6f6;
}

/* Ectoplasm. */
.desktop-mode-shell[data-desktop-mode-scheme="ectoplasm"] {
	--wp-admin-theme-color: #a3b745;
	/* color-mix(in srgb, #413256 80%, #fff 20%) */
	--desktop-mode-titlebar-bg-focused: #675b78;
	--desktop-mode-titlebar-color-focused: #ece6f6;
}

/* Midnight. */
.desktop-mode-shell[data-desktop-mode-scheme="midnight"] {
	--wp-admin-theme-color: #e14d43;
	/* color-mix(in srgb, #25282b 80%, #fff 20%) */
	--desktop-mode-titlebar-bg-focused: #515355;
	--desktop-mode-titlebar-color-focused: #f1f2f3;
}

/* Ocean. */
.desktop-mode-shell[data-desktop-mode-scheme="ocean"] {
	--wp-admin-theme-color: #9ebaa0;
	/* color-mix(in srgb, #627c83 80%, #fff 20%) */
	--desktop-mode-titlebar-bg-focused: #81969c;
	--desktop-mode-titlebar-color-focused: #f2fcff;
}

/* Sunrise. */
.desktop-mode-shell[data-desktop-mode-scheme="sunrise"] {
	--wp-admin-theme-color: #dd823b;
	/* color-mix(in srgb, #b43c38 80%, #fff 20%) */
	--desktop-mode-titlebar-bg-focused: #c36360;
	--desktop-mode-titlebar-color-focused: #f3f1f1;
}