/* Vasari — foundation tokens · v2.1.0 · 2026-09-26
   Generated from tokens/tokens.json by build/build.mjs. Do not edit by hand.
   Canonical: https://brand.vasari.club/tokens.css?code=vasariclub · fonts: https://brand.vasari.club/fonts.css?code=vasariclub
   One typeface (Geist). Square. Olive ink on cream. */

:root {
  /* Palette */
  --cream: #F2EFE6;  /* Ground. Default page background and the cream logo fill. */
  --limestone: #F5F2E8;  /* Alternate ground: signature pads, glass fallbacks, code blocks. */
  --white: #FFFFFF;  /* Rare. Glass edges only. */
  --sage: #6E735F;  /* Feature bands, in-progress dots. Rachel's DarkGreen logo colourway. */
  --sage-deep: #5A5E49;  /* Hover on sage. */
  --sage-soft: #E3E1D7;  /* Hover and selected rows, incoming chat bubble. */
  --sage-pale: #C9C8B4;  /* Text selection, focus on dark, not-started dots. Rachel's LightGreen is #CAC9B4; treat as the same colour. */
  --olive: #464736;  /* Primary button hover, feature band. */
  --deep: #3B3C2B;  /* Ink, and the one dark surface: scrolled header, footer, drawer, primary button, selected day. Also the Olive logo colourway. */
  --accent: #525443;  /* The available dot, the moving stage. */
  --ink-soft: #4A4636;  /* Secondary text on cream. */
  --terracotta: #9B4A3B;  /* The one warm accent. Attention, errors, needs-staff. Sparingly. */
  --success: #4A7C59;  /* Confirmed, signed, done. */
  --hero-fallback: #767562;  /* Behind a hero image while it loads. */
  --on-dark-muted: #F2EFE6C2;  /* Footer fine print on deep. Icons on deep use #F2EFE6B3. */

  /* Semantic aliases */
  --ground: var(--cream);
  --ink: var(--deep);
  --surface-dark: var(--deep);
  --on-dark: var(--cream);
  --error: var(--terracotta);  /* v2.1: there is no red in the system. Errors are terracotta. */
  --selection: var(--sage-pale);

  /* Rules, 1px always */
  --rule: #3B3C2B26;  /* Row dividers. FAQ uses #3B3C2B33. */
  --rule-strong: #3B3C2B66;  /* Field underline, outline button border, future lease steps. */
  --rule-dark: #F2EFE62E;  /* Hairlines on deep. */

  /* Photo shade */
  --shade-photo: linear-gradient(0deg, #08120CE6, #08120C1A 50%, transparent 70%);
  --shade-hero: linear-gradient(180deg, #0C161059, transparent 25%), linear-gradient(0deg, #08120C99, #0C140A0A 55%);
  --backdrop: #0A140D4D;  /* Sheet and dialog backdrop, with backdrop-filter: blur(20px) saturate(1.2). */

  /* Glass, floating surfaces only (v2.1) */
  --glass: #F2EFE6B8;
  --glass-dark: #3B3C2BB3;  /* On photos only. */
  --glass-blur: blur(24px) saturate(1.4);
  --glass-edge: #FFFFFF66;  /* 1px edge. */
  --glass-edge-dark: #F2EFE62E;
  --glass-shadow: inset 0 1px 0 #FFFFFF99, 0 10px 40px #08120C1F;
  --glass-shadow-dark: inset 0 1px 0 #F2EFE633, 0 10px 40px #08120C33;

  /* Shadow */
  --shadow-pop: 0 10px 40px #08120C44;  /* The one shadow. Popovers only. */

  /* Type: Geist only */
  --sans: Geist, Arial, sans-serif;  /* The only typeface. Variable 100 to 900, self-hosted (fonts/geist-latin.woff2). Emails fall to Arial. */

  /* Type scale */
  --t-10: 10px;  /* Legal fine print. */
  --t-12: 12px;  /* Nav, labels, meta, tab labels. */
  --t-13: 13px;  /* Small body, captions, status text. */
  --t-15: 15px;
  --t-16: 16px;  /* Field text. 16px so iOS does not zoom. */
  --t-24: 24px;  /* Section and dialog titles, next-step sentences. */
  --t-40: 40px;  /* App screen titles. Tracks like display, line-height 1.05. */
  --t-display: clamp(40px, 5.5vw, 72px);  /* Marketing display. */
  --t-apartment: clamp(21px, 2.1vw, 32px);  /* Apartment link over a photo. */

  /* Tracking */
  --track-display: -0.045em;  /* Display and 40px screen titles. */
  --track-title: -0.02em;
  --track-link: -0.035em;  /* Apartment links. */

  /* Line height */
  --lh-tight: 1.05;  /* Display and screen titles. */
  --lh-body: 1.6;

  /* Space and layout */
  --pad: clamp(24px, 4.3vw, 80px);  /* Page side padding. */
  --max: 1400px;  /* Content max width. */
  --wordmark-cap: 520px;  /* Wordmark max width on desktop. Full width on phones. */
  --hit: 44px;  /* Minimum hit target on every control. */
  --field: 48px;  /* Buttons and fields. */
  --radius: 0px;  /* Radius 0, no exceptions. Only 6px status dots and gallery dots are round. */

  /* Motion: settles, never bounces */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);  /* The one curve. Settles, never bounces. */

  /* Durations */
  --d-fast: .25s;  /* Hover, focus, toggles. */
  --d-cross: .65s;  /* Apartment crossfades, sheets. */
  --d-club: .9s;  /* Club crossfades. */
  --d-reveal: 1.1s;  /* Scroll reveal: +20px, fade. */
  --d-hero: 1.8s;  /* Hero image settles from scale(1.08). */

  /* Focus */
  --focus: 2px solid currentColor;  /* The one thicker line in the system. */
  --focus-offset: 5px;
}

::selection { background: var(--selection); color: var(--deep); }
body { margin: 0; background: var(--ground); color: var(--ink); font-family: var(--sans); font-weight: 400; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
a:focus-visible, button:focus-visible, input:focus-visible, summary:focus-visible { outline: var(--focus); outline-offset: var(--focus-offset); }

/* Links: underline in body copy and FAQ answers only */
.prose a, .faq a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }

/* Type roles */
.t-display { font: 400 var(--t-display)/var(--lh-tight) var(--sans); letter-spacing: var(--track-display); }
.t-screen  { font: 400 var(--t-40)/var(--lh-tight) var(--sans); letter-spacing: var(--track-display); }
.t-title   { font: 400 var(--t-24)/1.2 var(--sans); letter-spacing: var(--track-title); }
.t-body    { font: 400 var(--t-15)/1.65 var(--sans); }
.t-small   { font: 400 var(--t-13)/1.5 var(--sans); }
.t-label   { font: 400 var(--t-12)/1.4 var(--sans); }
.t-fine    { font: 400 var(--t-10)/1.6 var(--sans); }
.tnum      { font-variant-numeric: tabular-nums; }

/* Status: a 6px dot and plain words. No pills, no badges. */
.dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--ink); vertical-align: 2px; margin-right: 8px; }

/* Glass: floating surfaces only */
.glass { background: var(--glass); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); border: 1px solid var(--glass-edge); box-shadow: var(--glass-shadow); }
.glass-dark { background: var(--glass-dark); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); border: 1px solid var(--glass-edge-dark); box-shadow: var(--glass-shadow-dark); color: var(--on-dark); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}