/* =========================================================
   Base – variables, typography, global utilities
   Load after reset.css
   ========================================================= */

:root {
  --bg: #d5cddd;
  --bg-overlay: #e8e4ed;
  --bg-overlay-mix: color-mix(in srgb, var(--bg) 90%, transparent);
  --fg: black;
  --fg-inverse: white;
  --surface: #ffffff6b;
  --accent: #5036361c;
  --border: #444;

  --text-sm: 0.875rem;
  --text: 1rem;
  --text-lg: 1.25rem;

  --space: 0.5rem;
  --space-sm: 0.35rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;

  --gallery-min-col: 260px;
  --touch: 30px;
  --radius-pill: 999rem;
  --radius: var(--radius-pill);
  --ease: 0.2s ease;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #121212;
    --bg-overlay: #2a2530;
    --surface: #1d1d1d;
    --fg: #fff;
    --border: #444;
  }
}

@font-face {
  font-family: mad;
  font-weight: bold;
  src: url("/assets/fonts/mad-sans-fill-bold.woff2") format("woff2");
}

@media (max-width: 768px) {
  :root { --touch: 20px; }
}

html {
  font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: var(--bg);
  height: 100%;
  font-size: var(--text);
}

body {
  display: flex;
  flex-direction: column;
  color: var(--fg);
  overflow-x: hidden;
  overflow-y: auto;
}

html.modal-open,
body.modal-open {
  overflow: hidden;
}

a {
  color: var(--fg);
  transition: color var(--ease);
}

a:hover,
a:focus-visible {
  text-decoration: underline;
}

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

.lazyload,
.lazyloading {
  opacity: 0;
}

.lazyloaded {
  opacity: 1;
  transition: opacity 0.3s ease-in-out;
}