/* Qutir design tokens — shared by website and app.
   Direction: photography-led marketplace (Airbnb-class), quiet neutral UI,
   one confident brand colour (Qutir green = verified / trustworthy). */
:root {
  --bg: #fcfbf8;
  --bg-soft: #f6f2ea;
  --bg-sunk: #eee8dc;
  --surface: #ffffff;
  --ink: #24332d;
  --ink-2: #4b5a53;
  --muted: #7b847f;
  --faint: #b9b6ac;
  --line: #ebe5d9;
  --line-2: #ddd5c5;

  --brand: #0a6b4b;
  --brand-2: #14a06e;
  --brand-ink: #064d36;
  --brand-soft: #e6f2ec;
  --grad: linear-gradient(120deg, #0a6b4b 0%, #14a06e 100%);

  --gold: #a8843c;
  --gold-2: #c9a65e;
  --gold-soft: #f7efdc;
  --champagne: linear-gradient(135deg, #f1e3bd 0%, #c9a65e 100%);
  --gold-line: linear-gradient(90deg, transparent, #c9a65e, transparent);
  --warn: #b45309;
  --warn-soft: #fdf3e6;
  --crit: #c2352b;
  --crit-soft: #fcecea;
  --wa: #25d366;

  --shadow-1: 0 1px 2px rgba(60,48,20,.06), 0 2px 8px rgba(60,48,20,.06);
  --shadow-2: 0 6px 20px rgba(60,48,20,.09);
  --shadow-3: 0 18px 50px rgba(60,48,20,.15);

  --r-sm: 10px; --r: 14px; --r-lg: 20px; --r-xl: 28px;
  --f: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-serif: "Instrument Serif", Georgia, serif;
  --ease: cubic-bezier(.2,.8,.2,1);
  color-scheme: light;
}
/* Always light: the device's dark-mode setting is ignored on purpose. */
:root[data-theme="dark"] {
  --bg: #0f0f0e; --bg-soft: #171716; --bg-sunk: #1d1d1c; --surface: #1a1a19;
  --ink: #f2f2ef; --ink-2: #d2d2ce; --muted: #9b9b97; --faint: #5f5f5c; --line: #2a2a28; --line-2: #3a3a37;
  --brand: #2fbf8a; --brand-2: #45d39c; --brand-ink: #7fe0b8; --brand-soft: #12261e;
  --grad: linear-gradient(100deg, #0f8d62 0%, #23b07d 100%);
  --gold: #e0a84a; --gold-soft: #2a2213; --warn: #f0a24a; --warn-soft: #2a1f12; --crit: #f07167; --crit-soft: #2c1614;
  --shadow-1: 0 1px 2px rgba(0,0,0,.4); --shadow-2: 0 6px 20px rgba(0,0,0,.45); --shadow-3: 0 18px 50px rgba(0,0,0,.6);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--f); font-size: 15px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 6px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.num { font-variant-numeric: tabular-nums; }

/* Logo: house-roof "Q" mark + wordmark */
.logo { display: inline-flex; align-items: center; gap: 8px; font-weight: 800; font-size: 21px; letter-spacing: -.03em; text-decoration: none; color: var(--brand); }
.logo svg { flex: none; }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 0; border-radius: 12px; padding: 13px 20px; font-weight: 700; font-size: 15px; line-height: 1.2; text-decoration: none; transition: transform .15s var(--ease), background .2s, box-shadow .2s; white-space: nowrap; }
.btn:active { transform: scale(.97); }
.btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.btn-brand { background: var(--grad); color: #fff; }
.btn-brand { box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 2px 6px rgba(10,107,75,.18); }
.btn-brand:hover { box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 8px 22px rgba(10,107,75,.3); }
.btn-ink { background: var(--brand-soft); color: var(--brand-ink); box-shadow: inset 0 0 0 1px rgba(10,107,75,.18); }
.btn-ink:hover { background: #dcefe6; }
.btn-line { background: var(--surface); color: var(--brand-ink); box-shadow: inset 0 0 0 1px var(--line-2); }
.btn-line:hover { box-shadow: inset 0 0 0 1px var(--brand); }
.btn-soft { background: var(--bg-sunk); color: var(--ink); }
.btn-block { width: 100%; }
.btn-lg { padding: 16px 24px; font-size: 16px; border-radius: 14px; }
.btn-sm { padding: 9px 14px; font-size: 13.5px; border-radius: 10px; }

/* Badges */
.badge { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 700; padding: 5px 10px; border-radius: 999px; line-height: 1.2; white-space: nowrap; }
.badge-float { background: rgba(255,255,255,.96); color: #24332d; box-shadow: 0 1px 4px rgba(0,0,0,.14); }
.badge-brand { background: var(--brand-soft); color: var(--brand-ink); }
.badge-gold { background: var(--gold-soft); color: var(--gold); box-shadow: inset 0 0 0 1px rgba(201,166,94,.45); }
.badge-soft { background: var(--bg-sunk); color: var(--ink-2); }
.badge-ink { background: var(--champagne); color: #4a3a12; }

.dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; flex: none; }
.dot.fresh { background: #14a06e; box-shadow: 0 0 0 3px rgba(20,160,110,.18); }
.dot.aging { background: #d48a1d; box-shadow: 0 0 0 3px rgba(212,138,29,.18); }
.dot.stale { background: var(--faint); }

/* Champagne-gold detailing */
.badge-champ { background: var(--champagne); color: #4a3a12; box-shadow: 0 1px 4px rgba(120,90,30,.25); }
.goldrule { height: 1px; border: 0; background: var(--gold-line); margin: 0; }