/*
  theme.css -- your theme overrides. This is the file to edit to
  retheme the site.

  Every design token lives in src/styles/tokens.css (colors, type
  scale, spacing, layout, shadows) with its default value. Override any
  of them here: declarations in this file are unlayered, so they always
  beat the @layer base defaults in tokens.css.

  Colors are defined with light-dark(). Overriding with a plain color
  changes light and dark mode at once; use light-dark(<light>, <dark>)
  to set different values per mode.

  potluck's look: plain HTML with a few bureaucratic gestures, after
  https://www.kmjn.org/notes/modern_plain_html.html and its stylesheet
  (https://www.kmjn.org/notes/style.css) -- system fonts (no webfonts;
  astro.config.mjs loads none), one ~800px column, black links with a
  dotted underline, no rounding, shadows, or tracking.
*/

:root {
	--font-body: verdana, sans-serif;
	--font-mono: monospace;

	--color-brand: var(--color-text);
	--color-brand-hover: var(--color-text);
	--color-on-brand: var(--color-bg);

	--font-weight-heading: bold;
	--font-weight-display: bold;
	--tracking-tight: normal;
	--tracking-snug: normal;
	--leading-normal: 1.35;
	--leading-relaxed: 1.35;

	--content-width: 800px;
	--wide-width: 800px;

	--radius: 0;
	--radius-lg: 0;
	--shadow-sm: none;
	--shadow-lg: none;
}

body {
	-webkit-font-smoothing: auto;
	-moz-osx-font-smoothing: auto;
}

a:where(:not([class*="emdash"]):not([class*="ec-"])) {
	color: inherit;
	border-bottom: 1px dotted;
	overflow-wrap: break-word;
}

a:where(:not([class*="emdash"]):not([class*="ec-"])):hover {
	border-bottom-style: solid;
}

/* potluck's own pages: one column, aligned with the header's nav (same
   width and side padding as the template's page containers). */
.column {
	max-width: var(--wide-width);
	margin-inline: auto;
	padding: var(--spacing-6) var(--spacing-6) var(--spacing-16);
}

/* Keep the signed-in Admin link separated from the primary navigation. */
.nav-admin {
	margin-inline-start: var(--spacing-5);
}