/* Maison Livo — design tokens.
   Paper polarity (warm off-white page, near-charcoal ink) with the terracotta
   accent the website uses for eyebrows and primary actions.
   Type: Jost (display) · Hanken Grotesk (text) · DM Mono (specifications). */

@font-face {
  font-family: "Jost";
  src: url("../assets/fonts/Jost-Variable.ttf") format("truetype-variations"),
       url("../assets/fonts/Jost-Variable.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Hanken Grotesk";
  src: url("../assets/fonts/HankenGrotesk-Variable.ttf") format("truetype-variations"),
       url("../assets/fonts/HankenGrotesk-Variable.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ── palette ── */
  --ml-ink: #1c1b18;
  --ml-paper: #f7f3ec;
  --ml-card: #fffdf8;
  --ml-card-hover: #f1ece1;
  --ml-hairline: #ddd6c8;
  --ml-hairline-strong: #c8bfae;
  --ml-body-strong: #3b3630;
  --ml-body: #5a544b;
  --ml-mute: #8b8377;
  --ml-accent: #aa644a;
  --ml-accent-hover: #98583f;
  --ml-on-accent: #f7f3ec;
  --ml-on-video: #f7f5f0;

  /* ── semantic ── */
  --surface-page: var(--ml-paper);
  --surface-card: var(--ml-card);
  --surface-card-hover: var(--ml-card-hover);
  --surface-input: var(--ml-card);
  --line-hairline: var(--ml-hairline);
  --line-strong: var(--ml-hairline-strong);
  --text-ink: var(--ml-ink);
  --text-body-strong: var(--ml-body-strong);
  --text-body: var(--ml-body);
  --text-mute: var(--ml-mute);
  --accent: var(--ml-accent);
  --accent-hover: var(--ml-accent-hover);
  --on-accent: var(--ml-on-accent);
  --focus-ring: var(--ml-accent);

  /* ── type ── */
  --font-display: "Jost", Futura, "Century Gothic", system-ui, sans-serif;
  --font-text: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "DM Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --display-xl: clamp(38px, 7.5vw, 64px);
  --display-lg: clamp(32px, 6vw, 48px);
  --display-md: clamp(26px, 4.5vw, 32px);
  --display-sm: 24px;
  --body-lg: 18px; --body-lg-lh: 28px;
  --body-md: 16px; --body-md-lh: 24px;
  --body-sm: 14px; --body-sm-lh: 20px;
  --caption: 12px;
  --code: 13px; --code-lh: 18px;
  --eyebrow: 11px; --eyebrow-lh: 16px; --eyebrow-tracking: 0.14em;

  /* ── spacing ── */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 10px;
  --space-lg: 16px;
  --space-xl: 24px;
  --space-2xl: 32px;
  --space-3xl: 48px;
  --space-4xl: 64px;
  --space-5xl: 96px;
  --container-max: 1200px;
  --gutter: clamp(16px, 4vw, 24px);
  --band: clamp(48px, 8vw, 96px);
  --band-sm: clamp(32px, 6vw, 48px);
  --grid-gap: clamp(32px, 5vw, 64px);

  /* ── shape ── */
  --radius-xs: 2px;
  --radius-sm: 3px;
  --radius-md: 4px;
  --radius-lg: 6px;

  /* ── motion ── */
  --duration-instant: 90ms;
  --duration-fast: 160ms;
  --ease: cubic-bezier(.2, 0, .2, 1);
  --transition-control: background-color var(--duration-fast) var(--ease),
                        color var(--duration-fast) var(--ease),
                        border-color var(--duration-fast) var(--ease),
                        opacity var(--duration-fast) var(--ease);

  /* portal: apartment status colours */
  --status-available: #e9e3d6;
  --status-interest: #d9c9a8;
  --status-option: #c9a56b;
  --status-reserved: #aa644a;
  --status-sold: #1c1b18;

  /* measured at runtime by site.js; fallback keeps the hero sane before JS runs */
  --header-h: 64px;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-instant: 0ms;
    --duration-fast: 0ms;
  }
}