:root {
  --bg: #0c0b0a;
  --bg2: #161412;
  --fg: #f3efe6;
  --muted: #b7ad9f;
  --line: color-mix(in srgb, var(--accent) 45%, transparent);
  --accent: #c4a574;
  --shadow: rgb(0 0 0 / 0.35);
  --display-safe: 4.5vh 5vw;
  --serif: "Cormorant Garamond", "Palatino Linotype", Palatino, serif;
  --sans: "Outfit", "Segoe UI", sans-serif;
}

[data-theme="ebano"] {
  --bg: #0c0b0a;
  --bg2: #161310;
  --fg: #f4efe6;
  --muted: #b8ad9c;
  --accent: #c6a56d;
}

[data-theme="carrara"] {
  --bg: #f3efe6;
  --bg2: #e6e0d3;
  --fg: #2b2722;
  --muted: #6d655b;
  --accent: #7a6a55;
  --shadow: rgb(70 55 40 / 0.12);
}

[data-theme="bruma"] {
  --bg: #1b2228;
  --bg2: #242d35;
  --fg: #e8eef2;
  --muted: #a9b6bf;
  --accent: #9eb6c4;
}

[data-theme="roble"] {
  --bg: #1a140f;
  --bg2: #241c15;
  --fg: #f1e6d6;
  --muted: #c2b09a;
  --accent: #d2a06a;
}

[data-theme="lino"] {
  --bg: #ece4d4;
  --bg2: #e0d4c0;
  --fg: #3a3228;
  --muted: #74685a;
  --accent: #8a6a45;
  --shadow: rgb(70 50 30 / 0.1);
}

[data-theme="tinta"] {
  --bg: #10141c;
  --bg2: #181e2a;
  --fg: #eef1f6;
  --muted: #a8b0c0;
  --accent: #c5ccd8;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  color: var(--fg);
  background: var(--bg);
  font-family: var(--sans);
  font-weight: 400;
  letter-spacing: 0.01em;
}

img { max-width: 100%; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; }

.hairline {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  opacity: 0.7;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}