/* _shared/ui/theme.css */

/* =========================================================================== */
/* Shared theme: the one place the shared pages write their recurring colours. */
/* A page that uses a token links this stylesheet before its own. Windows      */
/* serves it from the shared virtual host; macOS and Linux inline it like any  */
/* other local stylesheet.                                                     */
/*                                                                             */
/* Two layers:                                                                 */
/* 1. The palette names a colour once. Its tokens are static: a page that      */
/*    wants the dark appearance's red writes var(--theme-red-dark) itself.     */
/* 2. The semantic tokens flip with the appearance. They hold the three looks  */
/*    the pages share today: the system look of the editors, the dialog look   */
/*    of the error, diagnostics and update pages, and the metrics dashboards.  */
/*    A page maps its own token names onto them, so its rules are unchanged.   */
/*                                                                             */
/* A colour that only one page uses stays in that page; the census in          */
/* tools/lint/hex-colours.cjs counts the literals that remain.                 */
/* =========================================================================== */

/* ========================= */
/* ========================= */
/* ======= 1/ Palette ====== */
/* ========================= */
/* ========================= */

:root {
	/* Apple system colours, light and dark appearance. */
	--theme-blue: #007aff;
	--theme-blue-dark: #0a84ff;
	--theme-red: #ff3b30;
	--theme-red-dark: #ff453a;
	--theme-green: #34c759;
	--theme-green-dark: #30d158;
	--theme-orange: #ff9500;
	--theme-orange-dark: #ff9f0a;
	--theme-gray: #8e8e93;

	/* Apple system greys and label colours. */
	--theme-label: #1d1d1f;
	--theme-secondary-label: #6e6e73;
	--theme-gray4: #d1d1d6;
	--theme-gray5: #e5e5ea;
	--theme-gray6: #f2f2f7;
	--theme-gray4-dark: #3a3a3c;
	--theme-gray5-dark: #2c2c2e;
	--theme-gray6-dark: #1c1c1e;
	--theme-page-background: #f5f5f7;

	/* White and the neutral greys that three or more page sheets spelled. They are
	   static, like the rest of the palette: a page that wants a grey in one
	   appearance only writes it in the matching rule. Added because no Apple
	   system colour holds these exact values. */
	--theme-white: #ffffff;
	--theme-grey-333: #333333;
	--theme-grey-555: #555555;
	--theme-grey-888: #888888;
	--theme-grey-999: #999999;
	--theme-grey-aaa: #aaaaaa;
	--theme-grey-ccc: #cccccc;
	--theme-grey-ddd: #dddddd;
	--theme-grey-e0e0e0: #e0e0e0;
	--theme-grey-e8e8ea: #e8e8ea;
	--theme-grey-d8d8de: #d8d8de;
	--theme-grey-2a2a2c: #2a2a2c;
	--theme-grey-242426: #242426;
	--theme-grey-444: #444444;
	--theme-grey-666: #666666;

	/* More Apple system colours, then the hues the metrics dashboards and the
	   colour pickers spell more than once. The hue-* names carry their value:
	   no system colour holds them. */
	--theme-yellow: #ffcc00;
	--theme-yellow-dark: #ffd60a;
	--theme-purple-dark: #bf5af2;
	--theme-pink-dark: #ff375f;
	--theme-cyan-dark: #64d2ff;
	--theme-indigo-dark: #5e5ce6;
	--theme-hue-1e1e2e: #1e1e2e;
	--theme-hue-30b0c7: #30b0c7;
	--theme-hue-5ac8fa: #5ac8fa;
	--theme-hue-f59e0b: #f59e0b;
	--theme-hue-32d74b: #32d74b;
	--theme-hue-ff6b35: #ff6b35;
	--theme-hue-00c7be: #00c7be;
	--theme-hue-e588f8: #e588f8;
	--theme-hue-f87171: #f87171;
	--theme-hue-0d0d1a: #0d0d1a;
	--theme-hue-0d1a0d: #0d1a0d;
	--theme-hue-f4a460: #f4a460;
}

/* ======================================= */
/* ======================================= */
/* ======= 2/ System look (editors) ====== */
/* ======================================= */
/* ======================================= */

:root {
	--theme-bg: var(--theme-gray6);
	--theme-surface: #fff;
	--theme-surface-2: #f6f6f9;
	--theme-separator: var(--theme-gray4);
	--theme-text: var(--theme-label);
	--theme-sub: var(--theme-secondary-label);
	--theme-accent: var(--theme-blue);
	--theme-accent-soft: rgba(0, 122, 255, 0.12);
	--theme-danger: var(--theme-red);
}

@media (prefers-color-scheme: dark) {
	:root {
		--theme-bg: var(--theme-gray6-dark);
		--theme-surface: var(--theme-gray5-dark);
		--theme-surface-2: #242426;
		--theme-separator: var(--theme-gray4-dark);
		--theme-text: #fff;
		--theme-sub: rgba(235, 235, 245, 0.6);
		--theme-accent: var(--theme-blue-dark);
		--theme-accent-soft: rgba(10, 132, 255, 0.22);
		--theme-danger: var(--theme-red-dark);
	}
}

/* ===================================================== */
/* ===================================================== */
/* ======= 3/ Dialog look (error, health, update) ====== */
/* ===================================================== */
/* ===================================================== */

:root {
	--theme-dialog-text: #1a1a1a;
	--theme-dialog-muted: #666;
	--theme-dialog-background: #fff;
	--theme-dialog-panel: #f6f6f6;
	--theme-dialog-border: #e0e0e0;
	--theme-dialog-code-background: #1e1e1e;
	--theme-dialog-code-text: #d4d4d4;
	--theme-dialog-accent: #0a66c2;
	--theme-dialog-accent-text: #fff;
	--theme-dialog-ok: #1a7f37;
	--theme-dialog-fail: #cf222e;
}

@media (prefers-color-scheme: dark) {
	:root {
		--theme-dialog-text: #e6e6e6;
		--theme-dialog-muted: #9a9a9a;
		--theme-dialog-background: #1f1f1f;
		--theme-dialog-panel: #2a2a2a;
		--theme-dialog-border: #3a3a3a;
		--theme-dialog-code-background: #111;
		--theme-dialog-ok: #3fb950;
		--theme-dialog-fail: #ff7b72;
	}
}

/* =========================================== */
/* =========================================== */
/* ======= 4/ Metrics look (dashboards) ====== */
/* =========================================== */
/* =========================================== */

:root {
	--theme-metrics-bg: var(--theme-page-background);
	--theme-metrics-panel: #ffffff;
	--theme-metrics-text: var(--theme-label);
	--theme-metrics-text-muted: #86868b;
	--theme-metrics-strong: var(--theme-label);
	--theme-metrics-border: #d2d2d7;
	--theme-metrics-th-bg: var(--theme-gray5);
	--theme-metrics-th-hover: var(--theme-gray4);
	--theme-metrics-td-hover: #f0f0f5;
}

@media (prefers-color-scheme: dark) {
	:root {
		--theme-metrics-bg: #1e1e1e;
		--theme-metrics-panel: #2d2d2d;
		--theme-metrics-text: #f0f0f0;
		--theme-metrics-text-muted: #aaaaaa;
		--theme-metrics-strong: #ffffff;
		--theme-metrics-border: #444444;
		--theme-metrics-th-bg: #333333;
		--theme-metrics-th-hover: #444444;
		--theme-metrics-td-hover: #3d3d3d;
	}
}