/* Starlight theme for /docs: the sovrnd console's palette and faces
   (internal/appview/ui/static/input.css), so the docs read as part of the
   same product. Unlayered, so it wins over Starlight's layered defaults. */

/* Light: console :root tokens. In Starlight's light scale "white" is the
   darkest ink and "black" the page background. */
:root[data-theme='light'],
[data-theme='light'] ::backdrop {
	--sl-color-white: #121621; /* smart-blue-900, foreground */
	--sl-color-gray-1: #242b42; /* 800 */
	--sl-color-gray-2: #364163; /* 700 */
	--sl-color-gray-3: #475785; /* 600, muted-foreground */
	--sl-color-gray-4: #7a8ab8; /* 400 */
	--sl-color-gray-5: #bdc4db; /* 200, border */
	--sl-color-gray-6: #dee2ed; /* 100, muted */
	--sl-color-gray-7: #eef0f6; /* 50 */
	--sl-color-black: #eef0f6; /* 50, background */

	--sl-color-accent-low: #dbe0f0; /* french-blue-100 */
	--sl-color-accent: #2e3d6b; /* french-blue-700, PTT */
	--sl-color-accent-high: #1f2947; /* french-blue-800 */

	--sl-color-orange-low: #fbf1d0; /* light-gold-100, accent */
	--sl-color-orange: #e9b816; /* light-gold-500 */
	--sl-color-orange-high: #5d4a09; /* light-gold-800, accent-foreground */
	--sl-color-red-low: #fee9e7; /* vibrant-coral-50 */
	--sl-color-red: #c31909; /* destructive */
	--sl-color-red-high: #921207; /* vibrant-coral-700 */
	--sl-color-green-low: #e0ebe0; /* muted-teal-100 */
	--sl-color-green: #517d4f; /* success */
	--sl-color-green-high: #3d5e3b; /* muted-teal-700 */
	--sl-color-blue-low: #dbe0f0; /* french-blue-100 */
	--sl-color-blue: #4d66b3; /* ring */
	--sl-color-blue-high: #2e3d6b; /* french-blue-700 */
	--sl-color-purple-low: #feeee7; /* tangerine-dream-50 */
	--sl-color-purple: #f1560e; /* tangerine-dream-500, signal */
	--sl-color-purple-high: #913408; /* tangerine-dream-700 */

	--sl-color-bg-nav: #eef0f6;
	--sl-color-bg-sidebar: #eef0f6;
	--sl-color-hairline-light: #dee2ed;
	--sl-color-hairline: #bdc4db;
	--sl-color-hairline-shade: #bdc4db;
	--sovrn-rule: #2e3d6b; /* french-blue-700, the masthead's PTT rule */
}

/* Dark: console .dark tokens. Starlight's dark scale is the default. */
:root,
::backdrop {
	--sl-color-white: #eef0f6; /* smart-blue-50, foreground */
	--sl-color-gray-1: #dee2ed; /* 100 */
	--sl-color-gray-2: #bdc4db; /* 200 */
	--sl-color-gray-3: #9ca7c9; /* 300, muted-foreground */
	--sl-color-gray-4: #596ca6; /* 500 */
	--sl-color-gray-5: #364163; /* 700, border */
	--sl-color-gray-6: #242b42; /* 800, muted */
	--sl-color-black: #0c0f17; /* 950, background */

	--sl-color-accent-low: #1f2947; /* french-blue-800 */
	--sl-color-accent: #7085c2; /* french-blue-400 */
	--sl-color-accent-high: #b8c2e0; /* french-blue-200 */

	--sl-color-orange-low: #5d4a09; /* light-gold-800, accent */
	--sl-color-orange: #e9b816; /* light-gold-500 */
	--sl-color-orange-high: #fdf8e8; /* light-gold-50, accent-foreground */
	--sl-color-red-low: #610c05; /* vibrant-coral-800 */
	--sl-color-red: #f8786d; /* destructive */
	--sl-color-red-high: #fdd2ce; /* vibrant-coral-100 */
	--sl-color-green-low: #283f27; /* muted-teal-800 */
	--sl-color-green: #84b082; /* success */
	--sl-color-green-high: #e0ebe0; /* muted-teal-100 */
	--sl-color-blue-low: #1f2947; /* french-blue-800 */
	--sl-color-blue: #94a3d1; /* ring */
	--sl-color-blue-high: #dbe0f0; /* french-blue-100 */
	--sl-color-purple-low: #602206; /* tangerine-dream-800 */
	--sl-color-purple: #f4783e; /* tangerine-dream-400 */
	--sl-color-purple-high: #fcddcf; /* tangerine-dream-100 */

	--sl-color-bg-nav: #0c0f17;
	--sl-color-bg-sidebar: #0c0f17;
	--sovrn-rule: #364163; /* smart-blue-700, border */

	--sl-font: 'Schibsted Grotesk Variable', 'Helvetica Neue', Arial, sans-serif;
	--sl-font-mono: 'JetBrains Mono Variable', ui-monospace, 'SFMono-Regular', Menlo, monospace;
	--sovrn-signal: #f1560e; /* tangerine-dream-500 */
	--sovrn-paper: #eef0f6; /* smart-blue-50 */
}

/* The console masthead's hard rule beneath the header. */
header.header {
	border-bottom: 2px solid var(--sovrn-rule);
}

::selection {
	background: var(--sovrn-signal);
	color: #fff;
}

.sl-markdown-content :is(h1, h2, h3, h4, h5),
h1#_top {
	font-weight: 700;
	letter-spacing: -0.025em;
}