/* Garnet Real Estate Partners — design tokens
   The site itself is Workshop 3's case study: tokens decided once, everything derives. */
:root {
  --paper: #FAF7F4;
  --ink: #2A1F24;
  --garnet: #782F40;
  --garnet-deep: #5C2331;
  --gold: #A98C4B;
  --gold-soft: #CEB888;
  --muted: #8A7880;
  --card: #FFFFFF;
  --line: #E6DCDA;
  --panel: #F4ECEA;
}
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #1E161A; --ink: #EDE4E0; --garnet: #C9798D; --garnet-deep: #A85B6E;
    --gold: #CEB888; --gold-soft: #8A7448; --muted: #9C8A90;
    --card: #281E23; --line: #3C2E34; --panel: #32252B;
  }
}
:root[data-theme="dark"] {
  --paper: #1E161A; --ink: #EDE4E0; --garnet: #C9798D; --garnet-deep: #A85B6E;
  --gold: #CEB888; --gold-soft: #8A7448; --muted: #9C8A90;
  --card: #281E23; --line: #3C2E34; --panel: #32252B;
}
:root[data-theme="light"] {
  --paper: #FAF7F4; --ink: #2A1F24; --garnet: #782F40; --garnet-deep: #5C2331;
  --gold: #A98C4B; --gold-soft: #CEB888; --muted: #8A7880;
  --card: #FFFFFF; --line: #E6DCDA; --panel: #F4ECEA;
}

* { box-sizing: border-box; }
html { background: var(--paper); }
body {
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--ink); line-height: 1.55; margin: 0;
}
.wrap { max-width: 44rem; margin: 0 auto; padding: 1.25rem 1rem 4rem; }

/* Masthead + nav */
.masthead { border-bottom: 3px solid var(--garnet); padding: .75rem 0 1rem; margin-bottom: 1.5rem; }
.eyebrow {
  font-size: .7rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: var(--gold); margin: 0 0 .3rem;
}
.masthead h1 {
  font-family: Palatino, "Palatino Linotype", Georgia, serif;
  color: var(--garnet); font-size: 1.6rem; margin: 0; line-height: 1.2; text-wrap: balance;
}
nav.site { display: flex; gap: 1rem; margin-top: .7rem; font-size: .85rem; flex-wrap: wrap; }
nav.site a { color: var(--ink); text-decoration: none; border-bottom: 2px solid transparent; padding-bottom: 1px; }
nav.site a:hover, nav.site a:focus-visible { border-bottom-color: var(--gold); outline: none; }
nav.site a[aria-current="page"] { color: var(--garnet); font-weight: 600; border-bottom-color: var(--garnet); }

h2 {
  font-family: Palatino, "Palatino Linotype", Georgia, serif;
  color: var(--garnet); font-size: 1.25rem; margin: 1.8rem 0 .5rem;
  border-bottom: 1.5px solid var(--gold-soft); padding-bottom: .15rem;
}
h3 { color: var(--garnet); font-size: 1rem; margin: 1.2rem 0 .35rem; }
p { margin: 0 0 .7rem; }
a { color: var(--garnet); }
ul, ol { margin: 0 0 .8rem; padding-left: 1.25rem; }
li { margin: .25rem 0; }
li::marker { color: var(--gold); }

.card {
  background: var(--card); border: 1px solid var(--line); border-radius: 6px;
  padding: .9rem 1.1rem; margin: 0 0 .9rem;
}
.panel { background: var(--panel); border-radius: 4px; padding: .6rem .9rem; margin: 0 0 .8rem; }
.pill {
  display: inline-block; font-size: .72rem; border: 1px solid var(--line);
  border-radius: 999px; padding: .1rem .6rem; color: var(--muted); white-space: nowrap;
}
blockquote.script {
  margin: .5rem 0; padding: .6rem .9rem; background: var(--panel);
  border-left: 3px solid var(--gold); border-radius: 0 4px 4px 0; font-style: italic;
}
.tablewrap { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-size: .88rem; }
th, td { border: 1px solid var(--line); padding: .35rem .6rem; text-align: left; vertical-align: top; }
thead th { background: var(--garnet); color: #fff; border-color: var(--garnet); }
td.label { background: var(--panel); color: var(--garnet); font-weight: 600; white-space: nowrap; }
footer.site {
  margin-top: 3rem; border-top: 1px solid var(--gold-soft); padding-top: .6rem;
  font-size: .78rem; color: var(--muted); text-align: center;
}
@media (prefers-reduced-motion: no-preference) {
  a, nav.site a { transition: border-color .15s ease, color .15s ease; }
}