CoastalCommitsPastes/client/app/styles/globals.css

:root {
	/* Spacing */
	--gap-quarter: 0.25rem;
	--gap-half: 0.5rem;
	--gap: 1rem;
	--gap-double: 2rem;

	--small-gap: 4rem;
	--big-gap: 4rem;
	--main-content: 55rem;
	--radius: 8px;
	--inline-radius: 5px;

	--gap-negative: calc(-1 * var(--gap));
	--gap-half-negative: calc(-1 * var(--gap-half));
	--gap-quarter-negative: calc(-1 * var(--gap-quarter));

	/* Typography */
	--font-sans: "Inter", -apple-system, BlinkMacSystemFont, Segoe UI, Roboto,
		Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
	--font-mono: ui-monospace, "SFMono-Regular", "Consolas", "Liberation Mono",
		"Menlo", monospace;

	/* Transitions */
	--transition: 0.1s ease-in-out;
	--transition-slow: 0.3s ease-in-out;

	--token: #999;
	--comment: #999;
	--keyword: #fff;
	--name: #fff;
	--highlight: #2e2e2e;

	/* Dark Mode Colors */
	--bg: #000;
	--fg: #fafbfc;
	--gray: #666;
	--light-gray: #444;
	--lighter-gray: #222;
	--lightest-gray: #1a1a1a;
	--darker-gray: #b4b4b4;
	--darkest-gray: #efefef;
	--article-color: #eaeaea;
	--header-bg: rgba(19, 20, 21, 0.45);
	--gray-alpha: rgba(255, 255, 255, 0.5);
	--selection: rgba(255, 255, 255, 0.99);
	--border: var(--lighter-gray);
	--warning: rgb(27, 134, 23);
	--link: #3291ff;
	color-scheme: dark;
}

[data-theme="light"] {
	--token: #666;
	--comment: #999;
	--keyword: #000;
	--name: #333;
	--highlight: #eaeaea;

	--bg: #fff;
	--fg: #000;
	--gray: #888;

	--light-gray: #dedede;
	--lighter-gray: #f5f5f5;
	--lightest-gray: #fafafa;
	--darker-gray: #555;
	--darkest-gray: #222;
	--article-color: #212121;
	--header-bg: rgba(255, 255, 255, 0.8);
	--gray-alpha: rgba(19, 20, 21, 0.5);
	--selection: var(0, 0, 0, .6);
	color-scheme: light;
}


* {
	box-sizing: border-box;
}

*:focus-visible {
	outline: 1px solid var(--gray);
}

::selection {
	text-shadow: none;
	background: var(--fg) !important;
	color: var(--bg) !important;
}

html,
body {
	padding: 0;
	margin: 0;
	font-size: 15px;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

body {
	min-height: 100vh;
	font-family: var(--font-sans);
	display: flex;
	flex-direction: column;
	background: var(--bg);
}

p {
	overflow-wrap: break-word;
	hyphens: auto;
}

input,
button,
textarea,
select {
	border: none;
	font-size: 1rem;
	background: var(--bg);
}

blockquote {
	font-style: italic;
	margin: 0;
	padding-left: 1rem;
	border-left: 3px solid var(--light-gray);
}

a.reset {
	outline: none;
	text-decoration: none;
}

pre,
code {
	font-family: var(--font-mono) !important;
}

hr {
	border: 0;
	border-bottom: 1px solid var(--light-gray);
	margin: var(--gap) 0;
}

@media print {
	:root {
		--bg: #fff;
		--fg: #000;
		--gray: #888;
		--light-gray: #dedede;
		--lighter-gray: #f5f5f5;
		--lightest-gray: #fafafa;
		--article-color: #212121;
		--header-bg: rgba(255, 255, 255, 0.8);
		--gray-alpha: rgba(19, 20, 21, 0.5);
		--selection: rgba(0, 0, 0, 0.99);

		--token: #666;
		--comment: #999;
		--keyword: #000;
		--name: #333;
		--highlight: #eaeaea;
	}

	* {
		text-shadow: none !important;
	}
}

#root,
#__next {
	isolation: isolate;
}

/* TODO: these should not be necessary. */
main {
	margin-top: 0 !important;
	padding-top: 0 !important;
}


textarea {
	resize: vertical;
	border: 1px solid var(--border);
	font-family: var(--font-sans);
	padding: var(--gap-half);
	border-radius: var(--radius);
}

textarea:focus {
	outline: none;
	border-color: var(--fg);
}