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

html {
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  scroll-behavior: smooth;
  hanging-punctuation: first last;
  scroll-padding-top: var(--space-16);
}

body {
  position: relative;
  min-height: 100dvh;
  line-height: 1.6;
  font-family: var(--font-body, sans-serif);
  font-size: var(--text-base);
  color: var(--color-text);
  background-color: var(--color-bg);
  /* Layered ambient: cool slate depth + gold accent halos + soft vignette */
  background-image:
    /* gold halo, top-left — institutional accent */
    radial-gradient(1200px 720px at 6% -6%, rgba(201, 162, 90, 0.085), transparent 62%),
    /* gold halo, mid-right */
    radial-gradient(900px 640px at 102% 38%, rgba(201, 162, 90, 0.055), transparent 66%),
    /* cool slate glow, bottom-center — adds dimension without warmth */
    radial-gradient(1200px 820px at 50% 108%, rgba(80, 100, 130, 0.085), transparent 60%),
    /* deep cool wash, bottom-left */
    radial-gradient(800px 600px at 12% 92%, rgba(58, 66, 82, 0.10), transparent 68%),
    /* faint vignette to push edges down */
    radial-gradient(140% 100% at 50% 50%, transparent 58%, rgba(0, 0, 0, 0.35) 100%);
  background-attachment: fixed;
  overflow-x: hidden;
}

/* Cool dust speckles — subtle ivory + gold sparkle, screened over slate */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    radial-gradient(1.2px 1.2px at 47px 31px, rgba(218, 184, 110, 0.42), transparent 60%),
    radial-gradient(1px 1px at 213px 88px, rgba(220, 226, 236, 0.30), transparent 60%),
    radial-gradient(1.3px 1.3px at 119px 257px, rgba(218, 184, 110, 0.38), transparent 60%),
    radial-gradient(0.9px 0.9px at 309px 173px, rgba(220, 226, 236, 0.24), transparent 60%),
    radial-gradient(1.2px 1.2px at 73px 391px, rgba(218, 184, 110, 0.34), transparent 60%),
    radial-gradient(1px 1px at 357px 327px, rgba(220, 226, 236, 0.22), transparent 60%);
  background-size: 437px 471px;
  background-repeat: repeat;
  opacity: 0.28;
  mix-blend-mode: screen;
}

/* Subtle film-grain noise for depth — neutral cool tone */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.62  0 0 0 0 0.66  0 0 0 0 0.74  0 0 0 0.16 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  opacity: 0.09;
  mix-blend-mode: overlay;
}

/* Keep page content above the ambient layers */
body > * { position: relative; z-index: 1; }

[data-theme='light'] body {
  background-image:
    radial-gradient(1200px 720px at 6% -6%, rgba(201, 162, 90, 0.10), transparent 62%),
    radial-gradient(900px 640px at 102% 38%, rgba(80, 100, 130, 0.06), transparent 66%),
    radial-gradient(800px 600px at 12% 92%, rgba(58, 66, 82, 0.05), transparent 68%);
}
[data-theme='light'] body::before { opacity: 0.20; }
[data-theme='light'] body::after { opacity: 0.04; }

img, picture, video, canvas, svg { display: block; max-width: 100%; height: auto; }
ul[role='list'], ol[role='list'] { list-style: none; }
input, button, textarea, select { font: inherit; color: inherit; }

h1, h2, h3, h4, h5, h6 { text-wrap: balance; line-height: 1.1; }
p, li, figcaption { text-wrap: pretty; max-width: 72ch; }

::selection { background: oklch(from var(--color-primary) l c h / 0.3); color: var(--color-text); }

:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

button { cursor: pointer; background: none; border: none; }
table { border-collapse: collapse; width: 100%; }

a, button, [role='button'], [role='link'], input, textarea, select {
  transition:
    color var(--transition-interactive),
    background var(--transition-interactive),
    border-color var(--transition-interactive),
    box-shadow var(--transition-interactive),
    transform var(--transition-interactive);
}

.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;
}