/* One stylesheet, no build step, no dependencies. Deployable as-is to GitHub
   Pages, Cloudflare Pages, Netlify, or any static host.

   The first block is the design system's token layer, kept in sync by hand with
   .claude/skills/rentvsbuy-design/tokens/*.css and App/Sources/DesignSystem/
   Tokens.swift. Only the tokens this site actually uses are copied down —
   there is no build step to strip the rest. Names match the design system
   exactly so a value can be traced across all three surfaces. */

:root {
  /* --- Brand ------------------------------------------------------------- */
  --teal-600: #1b5d73;   /* the accent, light */
  --teal-400: #438ba3;   /* the accent on device, dark */
  --teal-300: #63c3ad;   /* the accent on the web, dark */
  --teal-900: #0d3347;
  --mint-300: #8ce6bf;
  --orange-500: #ff9500;
  --amber-500: #e8963c;  /* the rent stroke in the wordmark */
  --amber-100: #ffe9a8;
  --amber-800: #6a5518;
  --amber-900: #4a3600;

  /* Owning is teal and renting is amber, here and in the app. */
  --color-buy: var(--teal-600);
  --color-rent: var(--orange-500);

  /* --- Neutrals ---------------------------------------------------------- */
  --web-bg: #ffffff;
  --web-surface: #f6f7f9;
  --web-text: #16191d;
  --web-text-muted: #5c6672;
  --web-border: #e2e6ea;

  --accent: var(--teal-600);
  --accent-contrast: #ffffff;
  --link: var(--accent);
  --link-hover: var(--teal-900);
  --placeholder-bg: var(--amber-100);
  --placeholder-text: var(--amber-900);

  /* The wordmark is inline SVG in every page and paints itself from these two
     custom properties. Renaming either one breaks the mark in five files. */
  --bg: var(--web-bg);

  /* --- Type -------------------------------------------------------------- */
  --font-system: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
  --web-h1-size: 2rem;
  --web-h1-leading: 1.2;
  --web-h1-tracking: -0.02em;
  --web-h2-size: 1.25rem;
  --web-h2-tracking: -0.01em;
  --web-h3-size: 1.02rem;
  --web-lede-size: 1.15rem;
  --web-small-size: .9rem;
  --web-code-size: .9em;
  --web-wordmark-weight: 650;
  --web-wordmark-size: 1.05rem;
  --web-measure: 46rem;        /* the single column the site lives in */

  /* --- Spacing ----------------------------------------------------------- */
  --web-gutter: 1.25rem;
  --web-card-padding: 1.1rem 1.25rem;
  --web-block-gap: 1.25rem;
  --web-grid-gap: 1rem;
  --web-grid-min: 13rem;
  --web-section-top: 2.25rem;

  /* --- Radii and rules --------------------------------------------------- */
  --radius-web-card: 14px;
  --radius-details: 12px;
  --radius-callout: 0 10px 10px 0;
  --radius-code: 5px;
  --radius-placeholder: 4px;
  --hairline: 1px;
  --callout-rule: 3px;
}

/* Dark values. The design system stores them under [data-theme="dark"]; this
   site ships no JavaScript, so system appearance is what actually drives it.
   Both selectors are here: the media query for the real site, the attribute so
   a toggle would work if one is ever added. Keep the two blocks identical. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --web-bg: #101315;
    --web-surface: #191d21;
    --web-text: #e8edf1;
    --web-text-muted: #9aa6b1;
    --web-border: #2a3138;
    --accent: var(--teal-300);
    --accent-contrast: #06231d;
    --color-buy: var(--teal-400);
    --link-hover: var(--mint-300);
    --placeholder-bg: var(--amber-800);
    --placeholder-text: var(--amber-100);
  }
}

:root[data-theme="dark"] {
  --web-bg: #101315;
  --web-surface: #191d21;
  --web-text: #e8edf1;
  --web-text-muted: #9aa6b1;
  --web-border: #2a3138;
  --accent: var(--teal-300);
  --accent-contrast: #06231d;
  --color-buy: var(--teal-400);
  --link-hover: var(--mint-300);
  --placeholder-bg: var(--amber-800);
  --placeholder-text: var(--amber-100);
}

/* ---------------------------------------------------------------------------
   Page
   --------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  padding: 0 var(--web-gutter) 5rem;
  background: var(--web-bg);
  color: var(--web-text);
  font: 400 16px/1.65 var(--font-system);
  -webkit-text-size-adjust: 100%;
}

/* One column, centred. Header, main and footer share the measure: no sidebars,
   no multi-column text, no sticky nav. */
header, main, footer { max-width: var(--web-measure); margin-inline: auto; }

/* ---------------------------------------------------------------------------
   SiteHeader — wordmark and four text links. No dropdowns, no call to action.
   --------------------------------------------------------------------------- */

header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 1.75rem 0;
  border-bottom: var(--hairline) solid var(--web-border);
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  font-weight: var(--web-wordmark-weight);
  font-size: var(--web-wordmark-size);
  color: var(--web-text);
  text-decoration: none;
}

.wordmark svg { display: block; }

nav a {
  color: var(--web-text-muted);
  text-decoration: none;
  margin-left: 1.1rem;
  font-size: .95rem;
}

/* The one hover state in the system: muted goes to full strength and gains an
   underline. Nothing scales, lifts, or changes hue. */
nav a:hover, nav a:focus { color: var(--web-text); text-decoration: underline; }
nav a[aria-current="page"] { color: var(--web-text); }

/* ---------------------------------------------------------------------------
   Type
   --------------------------------------------------------------------------- */

h1 {
  font-size: var(--web-h1-size);
  line-height: var(--web-h1-leading);
  letter-spacing: var(--web-h1-tracking);
  margin: 2.5rem 0 .5rem;
}
h2 {
  font-size: var(--web-h2-size);
  letter-spacing: var(--web-h2-tracking);
  margin: var(--web-section-top) 0 .5rem;
}
h3 { font-size: var(--web-h3-size); margin: 1.5rem 0 .35rem; }

p, li { color: var(--web-text); }
.lede { font-size: var(--web-lede-size); color: var(--web-text-muted); margin-top: 0; }
.muted { color: var(--web-text-muted); }
.updated { color: var(--web-text-muted); font-size: var(--web-small-size); margin-top: -.25rem; }

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

/* Figures are tabular wherever they appear in prose, so a column of money does
   not jitter between rows. */
table, code { font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------------------
   WebCard — filled surface, hairline border, no shadow. The system has no
   elevation model: depth comes from fill and hairlines.
   --------------------------------------------------------------------------- */

.card {
  background: var(--web-surface);
  border: var(--hairline) solid var(--web-border);
  border-radius: var(--radius-web-card);
  padding: var(--web-card-padding);
  margin: var(--web-block-gap) 0;
}

/* Callout — the only place the site raises its voice, and the one accent
   stroke in the whole system. One per page. */
.callout {
  background: var(--web-surface);
  border-left: var(--callout-rule) solid var(--accent);
  border-radius: var(--radius-callout);
  padding: .9rem 1.1rem;
  margin: 1.5rem 0;
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--web-grid-min), 1fr));
  gap: var(--web-grid-gap);
  margin: 1.5rem 0;
}

/* ---------------------------------------------------------------------------
   DataTable
   --------------------------------------------------------------------------- */

table { width: 100%; border-collapse: collapse; margin: var(--web-block-gap) 0; font-size: .95rem; }
th, td {
  text-align: left;
  padding: .55rem .6rem;
  border-bottom: var(--hairline) solid var(--web-border);
  vertical-align: top;
}
th { color: var(--web-text-muted); font-weight: 600; }

/* Monospace is reserved for formulas. */
code {
  font-family: var(--font-mono);
  font-size: var(--web-code-size);
  background: var(--web-surface);
  border: var(--hairline) solid var(--web-border);
  border-radius: var(--radius-code);
  padding: .1rem .35rem;
}

/* Details — progressive disclosure, closed by default. */
details {
  border: var(--hairline) solid var(--web-border);
  border-radius: var(--radius-details);
  padding: .85rem 1.1rem;
  margin: .75rem 0;
  background: var(--web-surface);
}
summary { cursor: pointer; font-weight: 600; }
details[open] summary { margin-bottom: .6rem; }

/* ---------------------------------------------------------------------------
   SiteFooter
   --------------------------------------------------------------------------- */

footer {
  margin-top: 3.5rem;
  padding-top: 1.5rem;
  border-top: var(--hairline) solid var(--web-border);
  color: var(--web-text-muted);
  font-size: var(--web-small-size);
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
footer a { color: var(--web-text-muted); }
footer a:hover, footer a:focus { color: var(--web-text); text-decoration: underline; }

/* Placeholder — a value nobody has filled in yet: an owner name, a domain, a
   tax constant. Deliberately loud. Shipping a policy page that still says
   "[Your Name or Company]" quietly would be worse than looking unfinished. */
mark {
  background: var(--placeholder-bg);
  color: var(--placeholder-text);
  border-radius: var(--radius-placeholder);
  padding: 0 .25rem;
  font-style: normal;
}

/* Motion is functional only. Respect a request for less of it. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}