/*
  base.css
  --------
  Reset + typographic defaults + the page background texture.
  Loads after tokens.css and should only ever reference var(--...) values,
  never a hard-coded color or size.
*/

/* ---- Reset ---------------------------------------------------------- */

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

html,
body,
h1, h2, h3, h4, h5, h6,
p, ul, ol, figure {
  margin: 0;
  padding: 0;
}

html {
  font-size: 100%; /* 1rem = 16px, respects the user's browser setting */
}

img, svg {
  max-width: 100%;
  height: auto;
  display: block;
}

ul, ol {
  list-style: none;
}

a {
  color: var(--color-link);
  text-decoration: none;
}

a:hover,
a:focus-visible {
  color: var(--color-link-hover);
  text-decoration: underline;
}

/* ---- Body & background texture -------------------------------------- */

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--color-text-on-dark);
  background-color: var(--color-bg-void);
  overflow-x: hidden;

  /*
    Subtle dark stone texture built entirely from layered gradients —
    no image file. A soft vignette toward the edges plus faint mottled
    patches to break up the flat black. Very low contrast on purpose:
    this sits behind chrome frames and parchment panels, it should
    read as "dark stone," not compete with them.
  */
  background-image:
    radial-gradient(ellipse at 20% 15%, rgba(255, 255, 255, 0.025) 0%, transparent 45%),
    radial-gradient(ellipse at 80% 70%, rgba(255, 255, 255, 0.02) 0%, transparent 50%),
    radial-gradient(ellipse at 50% 100%, rgba(0, 0, 0, 0.6) 0%, transparent 60%),
    radial-gradient(ellipse at center, #0a0c12 0%, var(--color-bg-void) 70%);
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: cover;

  min-height: 100vh;
}

/* ---- Typographic defaults -------------------------------------------- */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: var(--leading-tight);
  letter-spacing: 0.02em;
}

h1 { font-size: var(--text-4xl); }
h2 { font-size: var(--text-3xl); }
h3 { font-size: var(--text-2xl); }
h4 { font-size: var(--text-xl); font-family: var(--font-heading); }
h5 { font-size: var(--text-lg); font-family: var(--font-heading); }
h6 { font-size: var(--text-base); font-family: var(--font-heading); }

p {
  font-family: var(--font-body);
}

nav, .nav {
  font-family: var(--font-heading);
}