/* Reve Design System Theme */

/* Fonts */
/* --------------------------------------------------------------------- */ /**/

@font-face {
	font-family: "ReveUI";
	font-weight: 100 900;
	font-display: swap;
	src: url(ReveUI.shifted-variable.woff2) format("woff2");
	unicode-range:
		U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
		U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
		U+F8FF, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "ReveDisplay";
	font-weight: 500 900;
	font-display: swap;
	src: url(ReveDisplay-medium.woff2) format("woff2");
	unicode-range:
		U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
		U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
		U+F8FF, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "ReveDisplay";
	font-weight: 100 400;
	font-display: swap;
	src: url(ReveDisplay-regular.woff2) format("woff2");
	unicode-range:
		U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
		U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
		U+F8FF, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "ReveSansMono";
	font-weight: 100 900;
	font-display: swap;
	src: url(ReveSansMono-variable.woff2) format("woff2");
	unicode-range:
		U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
		U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
		U+F8FF, U+FEFF, U+FFFD;
}

/* Colors */
/* --------------------------------------------------------------------- */ /**/

:root {
	/* Colors: Gray */
	/* ----------------------------------------------------------------- */ /**/

	--rv-color-gray-50: light-dark(hsl(0 0% 98%), hsl(0 0% 10%));
	--rv-color-gray-100: light-dark(hsl(0 0% 94%), hsl(0 0% 18%));
	--rv-color-gray-200: light-dark(hsl(0 0% 90%), hsl(0 0% 22%));
	--rv-color-gray-300: light-dark(hsl(0 0% 84%), hsl(0 0% 28%));
	--rv-color-gray-400: light-dark(hsl(0 0% 65%), hsl(0 0% 35%));
	--rv-color-gray-500: light-dark(hsl(0 0% 46%), hsl(0 0% 44%));
	--rv-color-gray-600: light-dark(hsl(0 0% 34%), hsl(0 0% 58%));
	--rv-color-gray-700: light-dark(hsl(0 0% 26%), hsl(0 0% 73%));
	--rv-color-gray-800: light-dark(hsl(0 0% 16%), hsl(0 0% 84%));
	--rv-color-gray-900: light-dark(hsl(0 0% 10%), hsl(0 0% 92%));
	--rv-color-gray-950: light-dark(hsl(0 0% 8%), hsl(0 0% 95%));

	/* Colors: Red */
	/* ----------------------------------------------------------------- */ /**/

	--rv-color-red-50: light-dark(hsl(0 86% 97%), hsl(0 56% 24%));
	--rv-color-red-100: light-dark(hsl(0 93% 94%), hsl(1 60% 34%));
	--rv-color-red-200: light-dark(hsl(0 96% 89%), hsl(1 67% 37%));
	--rv-color-red-300: light-dark(hsl(0 94% 82%), hsl(1 71% 44%));
	--rv-color-red-400: light-dark(hsl(0 91% 71%), hsl(1 76% 53%));
	--rv-color-red-500: light-dark(hsl(0 84% 60%), hsl(1 90% 57%));
	--rv-color-red-600: light-dark(hsl(0 72% 51%), hsl(0 99% 68%));
	--rv-color-red-700: light-dark(hsl(0 74% 42%), hsl(0 100% 73%));
	--rv-color-red-800: light-dark(hsl(0 70% 35%), hsl(0 100% 86%));
	--rv-color-red-900: light-dark(hsl(0 63% 31%), hsl(0 100% 90%));
	--rv-color-red-950: light-dark(hsl(0 60% 20%), hsl(0 100% 96%));

	/* Colors: Blue */
	/* ----------------------------------------------------------------- */ /**/

	--rv-color-blue-50: light-dark(hsl(214 100% 97%), hsl(227 40% 14%));
	--rv-color-blue-100: light-dark(hsl(214 95% 93%), hsl(227 50% 23%));
	--rv-color-blue-200: light-dark(hsl(213 97% 87%), hsl(228 64% 43%));
	--rv-color-blue-300: light-dark(hsl(212 96% 78%), hsl(226 73% 51%));
	--rv-color-blue-400: light-dark(hsl(213 94% 68%), hsl(223 87% 56%));
	--rv-color-blue-500-light: hsl(217 91% 60%);
	--rv-color-blue-500-dark: hsl(217 96% 57%);
	--rv-color-blue-500: light-dark(var(--rv-color-blue-500-light), var(--rv-color-blue-500-dark));
	--rv-color-blue-600: light-dark(hsl(221 83% 53%), hsl(213 100% 65%));
	--rv-color-blue-700: light-dark(hsl(224 76% 48%), hsl(211 100% 75%));
	--rv-color-blue-800: light-dark(hsl(226 70% 40%), hsl(212 100% 83%));
	--rv-color-blue-900: light-dark(hsl(224 64% 33%), hsl(211 59% 89%));
	--rv-color-blue-950: light-dark(hsl(226 55% 18%), hsl(202 100% 95%));

	/* Colors: Sky */
	/* ----------------------------------------------------------------- */ /**/

	--rv-color-sky-100: light-dark(hsl(204 93.8% 93.7%), hsl(203.4 70.4% 28%));

	/* Colors: Danger */
	/* ----------------------------------------------------------------- */ /**/

	--rv-color-danger-50: var(--rv-color-red-50);
	--rv-color-danger-100: var(--rv-color-red-100);
	--rv-color-danger-200: var(--rv-color-red-200);
	--rv-color-danger-300: var(--rv-color-red-300);
	--rv-color-danger-400: var(--rv-color-red-400);
	--rv-color-danger-500: var(--rv-color-red-500);
	--rv-color-danger-600: var(--rv-color-red-600);
	--rv-color-danger-700: var(--rv-color-red-700);
	--rv-color-danger-800: var(--rv-color-red-800);
	--rv-color-danger-900: var(--rv-color-red-900);
	--rv-color-danger-950: var(--rv-color-red-950);

	/* Colors: Warning (amber ramp) */
	/* ----------------------------------------------------------------- */ /**/

	--rv-color-warning-50: light-dark(hsl(48 100% 96.1%), hsl(21.9 66.3% 21.1%));
	--rv-color-warning-100: light-dark(hsl(48 96.5% 88.8%), hsl(21.5 73.6% 29.7%));
	--rv-color-warning-200: light-dark(hsl(48 96.6% 76.7%), hsl(22.3 77.6% 33.3%));
	--rv-color-warning-300: light-dark(hsl(45.9 96.7% 64.5%), hsl(25.4 84.2% 39.6%));
	--rv-color-warning-400: light-dark(hsl(43.3 96.4% 56.3%), hsl(31.4 87.4% 46.7%));
	--rv-color-warning-500: light-dark(hsl(37.7 92.1% 50.2%), hsl(37 96.6% 48.3%));
	--rv-color-warning-600: light-dark(hsl(32.1 94.6% 43.7%), hsl(43.3 100% 53.4%));
	--rv-color-warning-700: light-dark(hsl(26 90.5% 37.1%), hsl(46.5 100% 61.1%));
	--rv-color-warning-800: light-dark(hsl(22.7 82.5% 31.4%), hsl(49.3 100% 73%));
	--rv-color-warning-900: light-dark(hsl(21.7 77.8% 26.5%), hsl(51.8 100% 85%));
	--rv-color-warning-950: light-dark(hsl(22.9 74.1% 16.7%), hsl(60 100% 94.6%));

	/* Colors: Success */
	/* ----------------------------------------------------------------- */ /**/

	/* Has tweak for 600 in light mode to add a bit more contrast */
	--rv-color-success-50: light-dark(hsl(138.5 76.5% 96.7%), hsl(144.3 53.6% 16%));
	--rv-color-success-100: light-dark(hsl(140.6 84.2% 92.5%), hsl(143.2 55.4% 23.5%));
	--rv-color-success-200: light-dark(hsl(141 78.9% 85.1%), hsl(141.5 58.2% 26.3%));
	--rv-color-success-300: light-dark(hsl(141.7 76.6% 73.1%), hsl(140.8 64.2% 31.8%));
	--rv-color-success-400: light-dark(hsl(141.9 69.2% 58%), hsl(140.3 68% 39.2%));
	--rv-color-success-500: light-dark(hsl(142.1 70.6% 45.3%), hsl(141.1 64.9% 43%));
	--rv-color-success-600: light-dark(hsl(142.1 76.2% 30.3%), hsl(141.6 72.4% 55.2%));
	--rv-color-success-700: light-dark(hsl(142.4 71.8% 29.2%), hsl(141.7 82.7% 70.1%));
	--rv-color-success-800: light-dark(hsl(142.8 64.2% 24.1%), hsl(141 90.9% 82.1%));
	--rv-color-success-900: light-dark(hsl(143.8 61.2% 20.2%), hsl(142 100% 89.1%));
	--rv-color-success-950: light-dark(hsl(144.3 60.7% 12%), hsl(144 100% 95.5%));

	/* Colors: Neutral */
	/* ----------------------------------------------------------------- */ /**/

	--rv-color-neutral-0: light-dark(hsl(0 0% 100%), hsl(0 0% 0%));
	--rv-color-neutral-50: var(--rv-color-gray-50);
	--rv-color-neutral-100: var(--rv-color-gray-100);
	--rv-color-neutral-200: var(--rv-color-gray-200);
	--rv-color-neutral-300: var(--rv-color-gray-300);
	--rv-color-neutral-400: var(--rv-color-gray-400);
	--rv-color-neutral-500: var(--rv-color-gray-500);
	--rv-color-neutral-600: var(--rv-color-gray-600);
	--rv-color-neutral-700: var(--rv-color-gray-700);
	--rv-color-neutral-800: var(--rv-color-gray-800);
	--rv-color-neutral-900: var(--rv-color-gray-900);
	--rv-color-neutral-950: var(--rv-color-gray-950);
	--rv-color-neutral-1000: light-dark(hsl(0 0% 0%), hsl(0 0% 100%));

	/* Colors: Alpha */
	/* ----------------------------------------------------------------- */ /**/

	--rv-color-alpha-50: light-dark(hsl(0 0% 0% / 0.06), hsl(0 0% 100% / 0.1));
	--rv-color-alpha-100: light-dark(hsl(0 0% 0% / 0.12), hsl(0 0% 100% / 0.16));
	--rv-color-alpha-200: light-dark(hsl(0 0% 0% / 0.17), hsl(0 0% 100% / 0.24));
	--rv-color-alpha-300: light-dark(hsl(0 0% 0% / 0.2), hsl(0 0% 100% / 0.24));
	--rv-color-alpha-400: light-dark(hsl(0 0% 0% / 0.25), hsl(0 0% 100% / 0.25));
	--rv-color-alpha-500: light-dark(hsl(0 0% 0% / 0.3), hsl(0 0% 100% / 0.3));
	--rv-color-alpha-600: light-dark(hsl(0 0% 0% / 0.3), hsl(0 0% 100% / 0.3));
	--rv-color-alpha-700: light-dark(hsl(0 0% 0% / 0.35), hsl(0 0% 100% / 0.35));
	--rv-color-alpha-800: light-dark(hsl(0 0% 0% / 0.4), hsl(0 0% 100% / 0.4));
	--rv-color-alpha-850: light-dark(hsl(0 0% 0% / 0.54), hsl(0 0% 100% / 0.54));
	--rv-color-alpha-900: light-dark(hsl(0 0% 0% / 0.6), hsl(0 0% 100% / 0.6));
	--rv-color-alpha-1000: light-dark(hsl(0 0% 0% / 1), hsl(0 0% 100% / 1));

	/* Colors: System */
	/* ----------------------------------------------------------------- */ /**/

	/* font-color/normal — light-dark(black, white) */
	--rv-font-color-normal: var(--rv-color-alpha-1000);

	/* font-color/light — 54% light-dark(black, white) */
	--rv-font-color-light: var(--rv-color-alpha-850);

	/* font-color/lighter — 40% light-dark(black, white) */
	--rv-font-color-lighter: var(--rv-color-alpha-800);

	--rv-color-light: hsl(0 0% 100%);
	--rv-color-dark: hsl(0 0% 0%);

	--rv-color-primary: var(--rv-color-blue-800);
	--rv-color-secondary: light-dark(var(--rv-color-blue-200), var(--rv-color-blue-50));

	--rv-color-canvas: light-dark(hsl(0 0% 94%), hsl(0 0% 0%));
	--rv-color-panel: light-dark(var(--rv-color-neutral-0), var(--rv-color-neutral-50));
	--rv-panel-background-color: light-dark(var(--rv-color-neutral-0), var(--rv-color-neutral-100));
	--rv-color-panel-border: light-dark(var(--rv-color-neutral-200), var(--rv-color-neutral-300));

	--rv-color-selection-primary: var(--rv-color-blue-100);
	--rv-color-selection-secondary: var(--rv-color-blue-50);
	--rv-color-edited: var(--rv-color-red-600);

	--rv-canvas-fade-out-gradient: linear-gradient(
		270deg,
		var(--rv-color-neutral-100) 0%,
		var(--rv-color-neutral-100) 55%,
		rgba(240, 240, 240, 0) 100%
	);
	--gradient-color: var(--rv-color-neutral-0);

	--rv-shadow-small-color-a: hsl(0 0% 0% / 16%);
	--rv-shadow-small-color-b: hsl(0 0% 0% / 14%);
	--rv-shadow-small: var(--rv-shadow-small-color-a) 0 2px 8px 0, var(--rv-shadow-small-color-b) 0 0 1px 0;

	--rv-box-shadow-panel: 0 8px 24px 0 hsl(0 0% 0% / 0.2), 0 1px 4px 0 hsl(0 0% 0% / 0.12);
	--rv-box-shadow-button: var(--rv-shadow-small);

	--rv-overlay-background-color: light-dark(hsl(0 0% 0% / 50%), hsl(0 0% 0% / 70%));

	/* Input */
	/* ----------------------------------------------------------------- */ /**/

	--rv-input-background-color: var(--rv-color-gray-100);
	--rv-input-background-color-hover: var(--rv-color-gray-200);
	--rv-input-background-color-focus: var(--rv-color-gray-100);

	--rv-input-background: var(--rv-color-neutral-100);
	--rv-input-border-color: light-dark(#e0e0e0, #2e2e2e);
	--rv-input-border-width: var(--rv-border-width-s);
	--rv-input-height-small: 32px;
	--rv-input-height-medium: 36px;
	--rv-input-focus-ring-color: hsl(198.6 88.7% 48.4% / 40%);
}

:root {
	/* Typography: Fonts */
	/* ----------------------------------------------------------------- */ /**/

	--rv-font-mono: "ReveSansMono", ui-monospace, monospace, var(--rv-font-emoji);
	--rv-font-sans: "ReveUI", Arial, ui-sans-serif, sans-serif, var(--rv-font-emoji);
	--rv-font-display: "ReveDisplay", system-ui, var(--rv-font-emoji);
	--rv-font-serif: ui-serif, serif, var(--rv-font-emoji);
	--rv-font-emoji: "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";

	/* Typography: Weights */
	/* ----------------------------------------------------------------- */ /**/

	--rv-font-weight-normal: 400;
	--rv-font-weight-semibold: 500;
	--rv-font-weight-bold: 700;

	/* Typography: Line Heights */
	/* ----------------------------------------------------------------- */ /**/

	--rv-line-height-denser: 1.2;
	--rv-line-height-normal: 1.5;
	--rv-line-height-dense: 1.4;
	--rv-line-height-sparser: 2;

	/* Typography: Letter Spacing */
	/* ----------------------------------------------------------------- */ /**/

	/* Display — pair with var(--rv-font-display) + matching --rv-font-size-* */
	--rv-letter-spacing-display-4x-large: 0.01em;
	--rv-letter-spacing-display-3x-large: 0.01em;
	--rv-letter-spacing-display-2x-large: 0.012em;
	--rv-letter-spacing-display-x-large: 0.014em;
	--rv-letter-spacing-display-large: 0.016em;
	--rv-letter-spacing-display-medium: 0.018em;

	/* Sans — pair with var(--rv-font-sans) + matching --rv-font-size-* */
	--rv-letter-spacing-sans-2x-large: 0em;
	--rv-letter-spacing-sans-large: 0.002em;
	--rv-letter-spacing-sans-medium: 0.004em;
	--rv-letter-spacing-sans-small: 0.006em;
	--rv-letter-spacing-sans-x-small: 0.008em;

	/* Typography: Sizes */
	/* ----------------------------------------------------------------- */ /**/

	/* font-size/x-small — 12px */
	--rv-font-size-x-small: 0.75rem;

	/* font-size/small — 14px */
	--rv-font-size-small: 0.875rem;

	/* font-size/medium — 16px */
	--rv-font-size-medium: 1rem;

	/* font-size/large — 18px */
	--rv-font-size-large: 1.125rem;

	/* font-size/x-large — 20px */
	--rv-font-size-x-large: 1.25rem;

	/* font-size/2x-large — 24px */
	--rv-font-size-2x-large: 1.5rem;

	/* font-size/3x-large — 32px */
	--rv-font-size-3x-large: 2rem;

	/* font-size/4x-large — 40px */
	--rv-font-size-4x-large: 2.5rem;

	/* Spacing */
	/* ----------------------------------------------------------------- */ /**/

	/* Base unit */
	--rv-rhythm: 8px;

	/* spacing/3x-small — 2px */
	--rv-spacing-3x-small: calc(0.25 * var(--rv-rhythm));

	/* spacing/2x-small — 4px */
	--rv-spacing-2x-small: calc(0.5 * var(--rv-rhythm));

	/* spacing/x-small — 8px */
	--rv-spacing-x-small: var(--rv-rhythm);

	/* spacing/small — 12px */
	--rv-spacing-small: calc(1.5 * var(--rv-rhythm));

	/* spacing/medium — 16px */
	--rv-spacing-medium: calc(2 * var(--rv-rhythm));

	/* spacing/large — 20px */
	--rv-spacing-large: calc(2.5 * var(--rv-rhythm));

	/* spacing/x-large — 24px */
	--rv-spacing-x-large: calc(3 * var(--rv-rhythm));

	/* spacing/2x-large — 32px */
	--rv-spacing-2x-large: calc(4 * var(--rv-rhythm));
	--rv-spacing-3x-large: calc(5 * var(--rv-rhythm));
	--rv-spacing-4x-large: calc(6 * var(--rv-rhythm));

	/* Spacing: Buttons */
	/* ----------------------------------------------------------------- */ /**/

	/* button-height/small — 32px */
	--rv-button-height-small: calc(4 * var(--rv-rhythm));

	/* button-height/medium — 40px */
	--rv-button-height-medium: calc(5 * var(--rv-rhythm));

	/* button-height/large — 48px */
	--rv-button-height-large: calc(6 * var(--rv-rhythm));

	/* Spacing: Border Radii */
	/* ----------------------------------------------------------------- */ /**/

	/* button-height/large — infinity */
	--rv-border-radius-full: calc(1px * infinity);

	/* border-radius/medium — 4px */
	--rv-border-radius-medium: calc(0.5 * var(--rv-rhythm));

	/* border-radius/large — 8px */
	--rv-border-radius-large: var(--rv-rhythm);

	/* border-radius/x-large — 16px */
	--rv-border-radius-x-large: calc(2 * var(--rv-rhythm));

	/* border-radius/2x-large — 24px */
	--rv-border-radius-2x-large: calc(3 * var(--rv-rhythm));

	/* Focus Ring */
	/* ----------------------------------------------------------------- */ /**/

	--rv-focus-ring: 2px solid var(--rv-color-blue-600);
	--rv-focus-ring-offset: 0;

	/* Icon Size */
	/* ----------------------------------------------------------------- */ /**/

	/* icon-size — 20px */
	--rv-icon-size: calc(2.5 * var(--rv-rhythm));

	/* icon-size/s — 16px */
	--rv-icon-size-s: calc(2 * var(--rv-rhythm));

	/** Z-indexes */
	/* ----------------------------------------------------------------- */ /**/

	--rv-z-index-drawer: 700;
	--rv-z-index-dialog: 800;
	--rv-z-index-dropdown: 900;
	--rv-z-index-toast: 950;
	--rv-z-index-tooltip: 1000;
	--rv-z-index-overlay: 1050;

	/** Transitions */
	/* ----------------------------------------------------------------- */ /**/

	--ease-in-out-quad: cubic-bezier(0.455, 0.03, 0.515, 0.955);

	--rv-transition-x-slow: 500ms;
	--rv-transition-slow: 200ms;
	--rv-transition-medium: 150ms;
	--rv-transition-fast: 100ms;
	--rv-transition-x-fast: 50ms;

	@media (prefers-reduced-motion: reduce) {
		--rv-transition-x-slow: 0s;
		--rv-transition-slow: 0s;
		--rv-transition-medium: 0s;
		--rv-transition-fast: 0s;
		--rv-transition-x-fast: 0s;
	}
}

/* Extensions */
/* --------------------------------------------------------------------- */ /**/

:root {
	/* Colors */
	--rv-color-highlight: #0bf;
	--rv-color-dim: rgba(0, 0, 0, 0.4);

	--rv-hover-scrim: linear-gradient(
		to bottom,
		rgba(0, 0, 0, 0.7) 0%,
		rgba(0, 0, 0, 0.7) 6%,
		rgba(0, 0, 0, 0) 33%,
		rgba(0, 0, 0, 0) 66%,
		rgba(0, 0, 0, 0.7) 94%,
		rgba(0, 0, 0, 0.7) 100%
	);

	--rv-canvas-shimmer-gradient: linear-gradient(
		90deg,
		light-dark(#e6e6e6, #4a4a4a) 0%,
		light-dark(#d9d9d9, #575757) 20%,
		light-dark(#e6e6e6, #4a4a4a) 40%
	);

	--rv-transparency-checkerboard:
		repeating-conic-gradient(light-dark(#e5e5e5, #2a2a2a) 0% 25%, light-dark(#f5f5f5, #1a1a1a) 0% 50%) 50% / 20px
		20px;

	/* Letter spacings */
	--rv-letter-spacing-x-denser: -0.015em; /* 20px */
	--rv-letter-spacing-2x-denser: -0.02em; /* 28px, 34px */

	/* Borders */
	--rv-border-width-s: 1px;
	--rv-border-width-m: 2px;
	--rv-border-width-w: 3px;

	/* Icon sizes */
	--rv-icon-size-xs: 0.75rem; /* 12px */
	--rv-icon-size-m: 1.5rem; /* 24px */
	--rv-icon-size-l: 2rem; /* 32px */

	/* Values */
	--rv-touchmin: 40px;
	--rv-transition-smoothstep: cubic-bezier(0.53, 0.2, 0.04, 0.96);
	--rv-transition-out-back: cubic-bezier(0.43, 1.91, 0.64, 1);
	--rv-transition-ease-out-quart: cubic-bezier(0.165, 0.84, 0.44, 1);
	--rv-transition-ease-in-out-quint: cubic-bezier(0.86, 0, 0.07, 1);
	--rv-transition-ease-out-quad: cubic-bezier(0.25, 0.46, 0.45, 0.94);

	/* https://linear-easing-generator.netlify.app/ */
	/* mass: 1, stiffness: 80, damping: 20, velocity: 0 */
	--rv-ease-spring: linear(
		0,
		0.005,
		0.02 2%,
		0.081 4.5%,
		0.469 15.2%,
		0.567,
		0.65,
		0.722 24.4%,
		0.784,
		0.835 31.1%,
		0.878 34.9%,
		0.914 39.1%,
		0.942 43.8%,
		0.964 49.1%,
		0.979 55.4%,
		0.989 62.4%,
		0.995 71.1%,
		1
	);

	--rv-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.16), 0 0 1px 0 rgba(0, 0, 0, 0.14);
	--rv-shadow-up: 0 0 16px light-dark(hsl(240 3.8% 46.1% / 12%), rgb(0 0 0 / 24%));

	--rv-dialog-width: calc(98.25 * var(--rv-rhythm));
	--rv-sidebar-min-width: calc(45 * var(--rv-rhythm));
	--rv-sidebar-default-width: calc(60 * var(--rv-rhythm));
	--rv-header-height: calc(7 * var(--rv-rhythm));
}

:root {
	background-color: var(--rv-color-neutral-0);
	color: var(--rv-font-color-normal);
	font-family: var(--rv-font-sans);
	-moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: antialiased;
	font-weight: var(--rv-font-weight-normal);
	line-height: var(--rv-line-height-normal);
	overscroll-behavior-x: none;
	text-rendering: optimizeLegibility;
}

:root:not([data-color-scheme]),
:root[data-color-scheme="system"] {
	color-scheme: light dark;
}

[data-color-scheme="dark"] {
	color-scheme: dark;
}

[data-color-scheme="light"] {
	color-scheme: light;
}

:root:has(:state(fullscreen-overlay-open)) {
	overflow: hidden;
}

/* Registered properties */

@property --rv-header-height {
	syntax: "<length>";
	inherits: true;
	initial-value: 0;
}

@property --checkbox-background {
	syntax: "<color>";
	inherits: true;
	initial-value: currentColor;
}

@property --checkbox-border {
	syntax: "<color>";
	inherits: true;
	initial-value: currentColor;
}

@property --checkbox-mark {
	syntax: "<color>";
	inherits: true;
	initial-value: currentColor;
}

@property --bookmark-background {
	syntax: "<color>";
	inherits: true;
	initial-value: currentColor;
}

@property --gradient-color {
	syntax: "<color>";
	inherits: true;
	initial-value: transparent;
}

@layer testing {
	:root {
		/* Testing Helpers */
		--IS_VRT_TESTING: ;
	}
}