/* ansatz / base
 *
 * minimal element resets, default typography, and link styling. nothing
 * specific to a page or component lives here.
 */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  background: var(--bg);
  color: var(--text);
  font-family: var(--serif);
  font-size: 18px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: 'kern', 'liga', 'onum';
}

html, body {
  margin: 0;
  padding: 0;
  min-height: 100%;
}

body {
  /* faint vignetting that hints at a viewport rather than a flat plane */
  background-image:
    radial-gradient(ellipse at 50% 0%, rgba(125, 155, 86, 0.04) 0%, transparent 55%),
    radial-gradient(ellipse at 50% 100%, rgba(165, 97, 58, 0.05) 0%, transparent 55%);
}

/* -- typography -- */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--display);
  font-weight: 400;
  margin: 0;
  line-height: 1.2;
  letter-spacing: 0.04em;
  color: var(--accent);
}

h1 { font-size: var(--t-display-l); letter-spacing: 0.18em; text-transform: uppercase; }
h2 { font-size: var(--t-display-m); letter-spacing: 0.12em; }
h3 { font-size: var(--t-display-s); letter-spacing: 0.08em; }
h4, h5, h6 {
  font-size: var(--t-body);
  font-family: var(--sans);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-dim);
}

p {
  margin: 0 0 var(--s-4);
}

p:last-child { margin-bottom: 0; }

small { font-size: var(--t-small); color: var(--text-dim); }

em { font-style: italic; }
strong { font-weight: 600; color: var(--ink); }

/* -- links -- */

a {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid var(--bronze-faint);
  transition: color var(--t-snap) var(--ease),
              border-color var(--t-snap) var(--ease),
              text-shadow var(--t-soft) var(--ease);
}

a:hover,
a:focus-visible {
  color: var(--ink);
  border-color: var(--accent);
  text-shadow: 0 0 14px var(--bronze-glow);
}

a:focus-visible {
  outline: 1px solid var(--accent);
  outline-offset: 3px;
}

/* -- code / mono -- */

code, pre, kbd, samp {
  font-family: var(--mono);
  font-size: 0.9em;
}

/* -- selection -- */

::selection {
  background: var(--bronze-faint);
  color: var(--ink);
}

/* -- glow utilities -- */

.glow-bronze {
  text-shadow: 0 0 18px var(--bronze-glow);
}

.tracking-wide {
  letter-spacing: 0.18em;
}

.uppercase {
  text-transform: uppercase;
}

.text-dim { color: var(--text-dim); }
.text-faint { color: var(--text-faint); }

/* -- starfield / quantum field placeholder spaces --
 * these zero-cost rules let component CSS attach to known classes without
 * having to repeat the layering. real visual rules come in the per-
 * component stylesheets in phase 1.
 */

.bg-layer-stars {
  position: fixed;
  inset: 0;
  z-index: var(--z-stars);
  pointer-events: none;
}

.bg-layer-quantum {
  position: fixed;
  inset: 0;
  z-index: var(--z-quantum);
  pointer-events: none;
}