/* Luxe Estates Bali — design.css
   =================================================================
   The design standard in code: the tokens, the base rules and the
   primitives every HTML surface on luxeestatesbali.com shares. Read
   luxe/design/README.md for the words; this file is the values.

   Source of truth is the design canvas in luxe/design/canvas/. The rule
   runs one way: change the canvas, then mirror the value here. A value
   that is in this file and not in the canvas is drift, not a decision.
   The few exceptions (the error state, which the canvas has no screen
   for) are marked "extension" below.

   THIS FILE IS COPIED, NOT LINKED. Each service builds from its own
   folder and depends on nothing at run time, so every one of them
   carries a byte-identical copy of this file (scripts/check-design.sh
   lists them). Edit luxe/design/design.css only, then run
   `scripts/check-design.sh --fix`; CI fails on any copy that differs.

   What belongs here: anything two services would otherwise copy. What
   does not: layout (page widths, gutters) and one-product components
   (the villa card, the calendar, the knowledge-base article) — those
   live in the service's own stylesheet, loaded after this one.
   ================================================================= */

/* ── Tokens ─────────────────────────────────────────────────────── */

:root {
  /* One warm, light world. Declared so a dark-mode browser does not
     auto-invert a palette that was designed. */
  color-scheme: light;

  /* Ground and surfaces. The v2 canvas names them --ground, --sink, --soft,
     --warm and --card; the first canvas's names stay as aliases so nothing
     already built on them moves. Same values under either name. */
  --bg: #faf7f0;            /* page ground */
  --bg-sink: #f6f1e6;       /* sunk panels: search fields, summaries */
  --surface: #ffffff;       /* cards */
  --surface-soft: #f1ebdd;  /* soft fills: amenities, tags, bands */
  --surface-warm: #f5f0e3;  /* text on the accent; the advisory note */
  --ground: var(--bg);
  --sink: var(--bg-sink);
  --soft: var(--surface-soft);
  --warm: var(--surface-warm);
  --card: var(--surface);

  /* Frosted layers (v2): the menu overlay, the scrolled header and the chip
     over a photograph. Each pairs with a blur — 18, 16 and 8. */
  --frost: rgba(250, 247, 240, 0.97);
  --frost-header: rgba(250, 247, 240, 0.86);
  --frost-chip: rgba(250, 247, 240, 0.92);
  /* The read-more fade and the hero's foot: nothing, into the ground. */
  --fade-ground: linear-gradient(180deg, rgba(250, 247, 240, 0), #faf7f0);

  /* Ink ramp, darkest to lightest */
  --ink: #1c1a15;
  --ink-2: #3e3828;
  --ink-3: #4a4433;
  --ink-soft: #5c5541;
  --ink-quiet: #6e6650;
  --ink-muted: #8a8171;
  --ink-faint: #b3aa93;

  /* Lines */
  --line: #ebe4d5;          /* card and section rules */
  --line-strong: #e3dcc9;   /* controls, the advisory note */
  --line-ghost: #e0d8c4;    /* ghost pills and chips */

  /* Accent: reserved for actions. Gold: emphasis, never a button. */
  --accent: #2a513d;
  --accent-deep: #1f3f2f;
  --accent-warm: #254936;
  --gold: #af8a4b;
  --gold-soft: #c8b98c;
  /* Copy and rules on the accent (v2): the owners card and its pill. */
  --on-accent-muted: rgba(245, 240, 227, 0.78);
  --on-accent-line: rgba(245, 240, 227, 0.45);

  /* Status. The canvas gives three: the "online now" dot, the "you save"
     panel, and the "awaiting confirmation" panel. */
  --ok: #2a9d5c;
  --good-bg: #eaf0e7;  --good-line: #d8e2d4;  --good-ink: #2a513d;
  --warn-bg: #f7edd9;  --warn-line: #ead9b4;  --warn-ink: #6b5320;  --warn-label: #9a7328;
  /* extension: the canvas has no error screen. These are the values the
     storefront's owner form and the staff tools already ship. */
  --bad-bg: #f8ebe7;   --bad-line: #ecc9c0;   --bad-ink: #a3402f;
  --danger: #a3402f;
  /* The canvas's disabled reserve button and its past calendar days. */
  --disabled-bg: #d8d0bc;
  --disabled-ink: #cfc7b2;

  /* Type. Marcellus is display only; everything else is Instrument Sans.
     Both have a real fallback stack so a blocked font host degrades. */
  --display: 'Marcellus', 'Iowan Old Style', Georgia, serif;
  --body: 'Instrument Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI',
          Roboto, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  /* The canvas's body size. A reading tool may raise these two in its own
     stylesheet (the staff tools use 14.5px / 1.6); nothing else is tunable. */
  --text: 13.5px;
  --leading: 1.55;

  /* The v2 canvas's type scale: display sizes in Marcellus, body sizes in
     Instrument Sans. Where the canvas has a phone and a desktop size, both
     are here and the surface picks per breakpoint. */
  --fs-display-xl: 64px;    /* desktop hero, 1.02 */
  --fs-display-menu: 56px;  /* desktop menu, 1.05 */
  --fs-title-lg: 48px;      /* desktop page titles, 1.05 */
  --fs-display: 40px;       /* phone hero and menu, 1.06 */
  --fs-section: 36px;       /* desktop section titles */
  --fs-title: 30px;         /* phone page titles */
  --fs-block: 26px;         /* block titles; 24 on a CTA, 18 in a quote */
  --fs-card: 21px;          /* card titles; 16.5 compact, 19 for numerals */
  --fs-body-lg: 15px;       /* desktop body, 1.6 */
  --fs-body: 13.5px;        /* phone body, 1.55 */
  --fs-link: 12.5px;        /* text links, 600, in the accent */
  --fs-smallcaps: 12px;     /* navigation, .16em, 600 */
  --fs-caps: 10.5px;        /* eyebrow, .24em, 600; 9.5/.18em on a chip, 10/.14em on a tag */

  /* Radii: the v2 canvas's scale, and the first canvas's three names for
     the steps it used (control, panel, card) kept as aliases. */
  --r-pill: 999px;
  --r-2xs: 6px;
  --r-xs: 10px;
  --r-sm: 12px;
  --r-md: 16px;
  --r-lg: 20px;
  --r-xl: 24px;
  --r-2xl: 28px;
  --r-control: var(--r-sm);   /* inputs, small panels, amenities */
  --r-panel: var(--r-md);     /* stat strips, reviews, the good panel */
  --r-card: var(--r-lg);      /* cards */

  /* Elevation, motion, chrome */
  --lift: 0 18px 40px rgba(84, 70, 40, 0.10);
  --lift-sm: 0 8px 20px rgba(84, 70, 40, 0.06);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --stagger: 40ms;      /* per menu item */
  --pop-delay: 300ms;   /* the Superhost mark */

  /* Layout (v2): a 12-column grid with 24px gutters, 1200px centred on a
     desktop. Page margins are each surface's own. */
  --container: 1200px;
  --gutter: 24px;

  /* The header's height: the canvas's phone bar, and 72px on a desktop. The
     storefront hero runs under it by exactly this. */
  --header-h: 3.25rem;
}

@media (min-width: 64rem) {
  :root { --header-h: 72px; }
}

/* The one entrance every screen shares. */
@keyframes sIn {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}

/* A mark that arrives: the canvas's Superhost pill and its Confirmed tag. */
@keyframes pop {
  0% { transform: scale(0.6); opacity: 0; }
  70% { transform: scale(1.06); }
  100% { transform: scale(1); opacity: 1; }
}

/* Typing dots. */
@keyframes blink {
  0%, 80%, 100% { opacity: 0.25; }
  40% { opacity: 0.9; }
}

/* ── Base ───────────────────────────────────────────────────────── */

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  /* Short pages otherwise end the footer mid-viewport with ground below
     it, which reads as a page that failed to finish loading. */
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--body);
  font-size: var(--text);
  line-height: var(--leading);
  -webkit-font-smoothing: antialiased;
}

body > main { flex: 1 0 auto; }

img { max-width: 100%; display: block; }

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-deep); }

h1, h2, h3 { font-family: var(--display); font-weight: 400; margin: 0; line-height: 1.15; }

code, kbd, pre { font-family: var(--mono); }
code { font-size: 0.92em; }

:where(a, button, input, select, textarea, summary):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

main > * { animation: sIn 0.5s var(--ease) both; }

@media (prefers-reduced-motion: reduce) {
  main > * { animation: none; }
  * { transition: none !important; }
}

/* ── Eyebrow ────────────────────────────────────────────────────── */

/* The small uppercase label over a block. The canvas uses it everywhere. */
.eyebrow {
  font-size: 10.5px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink-muted);
  font-weight: 600;
}

/* ── Brand ──────────────────────────────────────────────────────── */

/* "LUXE ESTATES" in the display face; a service adds its own name after
   it in gold: <a class="brand"><span class="brand__name">LUXE ESTATES</span>
   <span class="brand__app">Almanac</span></a>. Plain text inside .brand
   is the storefront's own mark. */
.brand {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  font-family: var(--display);
  font-size: 17px;
  letter-spacing: 0.06em;
  color: var(--ink);
  white-space: nowrap;
}
.brand:hover { color: var(--ink); }
.brand__name { font-family: var(--display); letter-spacing: 0.06em; }
.brand__app {
  font-family: var(--body);
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--gold);
}

/* ── Header and navigation ──────────────────────────────────────── */

/* Structure only. The storefront floats its header over the hero photo
   and paints its own ground; every other surface adds --solid. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: var(--header-h);
  padding: 14px 20px;
}

.site-header--solid {
  background: rgba(250, 247, 240, 0.88);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}

.site-nav { display: flex; align-items: center; gap: 18px; }

/* The v2 canvas's small caps: 12px at .16em, the current page underlined in
   gold. */
.site-nav a {
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ink-2);
  white-space: nowrap;
  padding-bottom: 3px;
  border-bottom: 1px solid transparent;
}

.site-nav a:hover { color: var(--ink); }
.site-nav a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--gold); }

/* ── Page head ──────────────────────────────────────────────────── */

/* Eyebrow, display heading, optional lede and actions — the canvas's
   screen head. Horizontal room comes from the page, not from here. */
.page-head { padding: 6px 0 22px; }
.page-head .eyebrow { display: block; margin-bottom: 8px; }
.page-head h1 { font-size: 30px; letter-spacing: 0.005em; text-wrap: balance; }
.page-head .lede {
  margin: 8px 0 0;
  max-width: 40rem;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ink-soft);
  text-wrap: pretty;
}
.page-head .actions { margin-top: 16px; }

@media (min-width: 40rem) {
  .page-head h1 { font-size: 40px; }
}

/* ── Card ───────────────────────────────────────────────────────── */

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: 20px 22px;
}
.card > .eyebrow { display: block; margin-bottom: 8px; }
.card h2 { font-size: 21px; margin-bottom: 8px; }

@media (max-width: 40rem) {
  .card { padding: 18px 16px; border-radius: var(--r-panel); }
}

/* ── Buttons ────────────────────────────────────────────────────── */

/* One shape, the pill. The filled one is the primary action; the outline
   variants draw their ring inside the box so every variant is the same
   size. Gold is never a button colour. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 20px;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--accent);
  color: var(--surface-warm);
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease;
}
.btn:hover { background: var(--accent-deep); color: var(--surface-warm); }

.btn--ghost { background: transparent; box-shadow: inset 0 0 0 1px var(--accent); color: var(--accent); }
.btn--ghost:hover { background: var(--surface-soft); color: var(--accent-deep); }

.btn--quiet { background: transparent; box-shadow: inset 0 0 0 1px var(--line-strong); color: var(--ink-quiet); }
.btn--quiet:hover { background: var(--surface-soft); color: var(--ink); }

.btn--danger { background: transparent; box-shadow: inset 0 0 0 1px var(--bad-line); color: var(--danger); }
.btn--danger:hover { background: var(--bad-bg); color: var(--danger); }

.btn--small { padding: 7px 14px; font-size: 11.5px; }
.btn--block { display: flex; width: 100%; }

.btn:disabled, .btn[aria-disabled="true"] {
  background: var(--disabled-bg);
  color: var(--ink-muted);
  box-shadow: none;
  cursor: default;
}

/* ── Chips ──────────────────────────────────────────────────────── */

/* Ghost pills for filters and related questions. The chosen one is
   marked in ink, not in the accent: a filter is not an action. */
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }

.chip {
  display: inline-block;
  flex-shrink: 0;
  padding: 8px 15px;
  border: 1px solid var(--line-ghost);
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--ink-quiet);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}
a.chip, button.chip { cursor: pointer; }
a.chip:hover, button.chip:hover { background: var(--surface-soft); color: var(--ink); }
.chip--ink, .chip[aria-current="true"] { background: var(--ink); border-color: var(--ink); color: var(--surface-warm); }

/* ── Tags ───────────────────────────────────────────────────────── */

/* Tiny uppercase labels: an audience, a channel, a state. */
.tag {
  display: inline-block;
  padding: 3px 9px;
  border-radius: var(--r-pill);
  background: var(--surface-soft);
  color: var(--ink-quiet);
  font-size: 9.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
  vertical-align: middle;
}
.tag--gold { background: var(--warn-bg); color: var(--warn-label); }
.tag--accent { background: var(--good-bg); color: var(--good-ink); }
.tag--ink { background: var(--ink); color: var(--surface-warm); }

/* ── Notes ──────────────────────────────────────────────────────── */

/* Advisory, never alarming — but never invisible. Margins are the page's. */
.note {
  padding: 12px 16px;
  background: var(--surface-warm);
  border: 1px solid var(--line-strong);
  border-radius: 14px;
  font-size: 11.5px;
  line-height: 1.55;
  color: var(--ink-soft);
}
.note a { font-weight: 600; }
.note--good { background: var(--good-bg); border-color: var(--good-line); color: var(--good-ink); }
.note--warn { background: var(--warn-bg); border-color: var(--warn-line); color: var(--warn-ink); }
.note--bad { background: var(--bad-bg); border-color: var(--bad-line); color: var(--bad-ink); }

/* ── Empty state ────────────────────────────────────────────────── */

/* Nothing to list is a supported state, so it explains itself and
   offers a way on. */
.empty {
  padding: 30px 22px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 22px;
  text-align: center;
}
.empty h2 { font-size: 21px; margin-bottom: 10px; }
.empty p { margin: 0 0 18px; font-size: 13px; color: var(--ink-soft); text-wrap: pretty; }
.empty p:last-child { margin-bottom: 0; }

/* ── Forms ──────────────────────────────────────────────────────── */

/* <label class="field"><span>Label</span><input></label>. The label is
   the eyebrow idiom at .18em; the control is the canvas's input. */
.field { display: block; margin: 0 0 14px; }
.field > span, .field > label, .label {
  display: block;
  margin-bottom: 5px;
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-muted);
  font-weight: 600;
}
.field .hint {
  display: block;
  margin-top: 5px;
  font-size: 12px;
  color: var(--ink-muted);
  letter-spacing: 0;
  text-transform: none;
  font-weight: 400;
}

.input,
.field input:not([type=checkbox]):not([type=radio]),
.field select,
.field textarea {
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-control);
  padding: 12px 14px;
  font: inherit;
  font-size: 14px;
  color: var(--ink);
}
.input::placeholder, .field input::placeholder, .field textarea::placeholder { color: var(--ink-faint); }

.field select, select.input {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M3 6l5 5 5-5' stroke='%236e6650' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 36px;
}
.field textarea, textarea.input { resize: vertical; min-height: 72px; }

.form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 4px; }

.row { display: grid; gap: 0 14px; grid-template-columns: 1fr; }
@media (min-width: 40rem) {
  .row { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
}

/* ── Tables ─────────────────────────────────────────────────────── */

.table-wrap { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.table th {
  text-align: left;
  padding: 0 10px 8px 0;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-muted);
  font-weight: 600;
  border-bottom: 1px solid var(--line-strong);
}
.table td { padding: 11px 10px 11px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.table tr:last-child td { border-bottom: 0; }
.table td form { display: inline; }
.table .quiet, .table small { color: var(--ink-muted); font-size: 12px; }
.table tr.off td { color: var(--ink-faint); text-decoration: line-through; }

/* ── Footer ─────────────────────────────────────────────────────── */

.site-footer { margin-top: 36px; padding: 40px 20px 46px; border-top: 1px solid var(--line); }
.site-footer p { margin: 0; font-size: 12px; color: var(--ink-muted); line-height: 1.7; }
.site-footer hr { height: 1px; border: 0; background: var(--line); margin: 16px 0; }
.site-footer .fine { font-size: 10.5px; color: var(--ink-faint); line-height: 1.8; }