/* ==========================================================================
   Base — CSS custom properties (brand tokens) + reset
   ========================================================================== */

:root {
  /* --- Color palette --- */
  --color-ground:       #3D2B1F;   /* background */
  --color-parchment:    #F5ECD7;   /* primary text  — 12.1:1 contrast on ground */
  --color-sand:         #D4B896;   /* secondary text — 7.2:1 contrast */
  --color-silver:       #C4D4DC;   /* accent         — 6.8:1 contrast */
  --color-leaf:         #8EC9A0;   /* knowledge, growth — 5.1:1 contrast */
  --color-accent-green: #406A4C;   /* buttons, active states — 4.88:1 on parchment */
  --color-muted:        #AD9274;   /* 4.5:1+ on ground — passes AA normal text */
  --color-error:        #E57373;   /* form errors */
  --color-warning:      #FFB74D;   /* warnings, amber queue alerts */

  /* --- Typography --- */
  --font-wordmark-a:    'Cormorant Garamond', Georgia, serif;  /* italic weight 300 */
  --font-wordmark-topos:'Cinzel', 'Palatino Linotype', serif;  /* weight 400 */
  --font-body:          'Atkinson Hyperlegible', system-ui, sans-serif;

  /* --- Type scale --- */
  --text-xs:   0.875rem;  /* 14px — minimum for any text */
  --text-sm:   1rem;      /* 16px — base */
  --text-md:   1.125rem;  /* 18px */
  --text-lg:   1.25rem;   /* 20px */
  --text-xl:   1.5rem;    /* 24px */
  --text-2xl:  2rem;      /* 32px */
  --text-3xl:  3rem;      /* 48px */

  /* --- Line height --- */
  --lh-body:     1.6;
  --lh-heading:  1.2;
  --lh-tight:    1.1;

  /* --- Spacing scale --- */
  --space-xs:  0.25rem;
  --space-sm:  0.5rem;
  --space-md:  1rem;
  --space-lg:  2rem;
  --space-xl:  4rem;
  --space-2xl: 8rem;

  /* --- Layout --- */
  --content-width: 68ch;
  --wide-width:    90rem;
  --column-gap:    var(--space-lg);

  /* --- UI --- */
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 8px;
  --border-width: 1px;
  --border-color: color-mix(in srgb, var(--color-parchment) 20%, transparent);
  --focus-ring: 2px solid var(--color-silver);
  --transition: 150ms ease;
}

/* --- Reset --- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 100%; /* 16px base */
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  background-color: var(--color-ground);
  color: var(--color-parchment);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  line-height: var(--lh-body);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

input,
button,
textarea,
select {
  font: inherit;
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
}

/* --- Links --- */
a {
  color: var(--color-silver);
  text-underline-offset: 0.2em;
  transition: color var(--transition);
}

a:hover,
a:focus {
  color: var(--color-parchment);
}

a:focus-visible {
  outline: var(--focus-ring);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* --- Headings --- */
h1, h2, h3, h4, h5, h6 {
  line-height: var(--lh-heading);
  color: var(--color-parchment);
  font-weight: 600;
}

/* --- Horizontal rule --- */
hr {
  border: none;
  border-top: var(--border-width) solid var(--border-color);
  margin: var(--space-lg) 0;
}

/* --- Screen reader only utility --- */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}