@import url('https://fonts.googleapis.com/css2?family=Jost:wght@300;400;500;600;700&family=Mulish:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&display=swap');

/* ============================================================
   LE TERRAZZE — Concierge iOS prototype
   Tokens scoped to the phone so the canvas chrome is untouched.
   ============================================================ */
.lt-phone {
  --ivory:#FAF7F2; --paper:#FFFFFF; --ivory-deep:#F2ECE1; --linen:#EBE3D5;
  --taupe-200:#E0D7C7; --taupe-400:#B9AD96; --stone-600:#8A7F6B; --umber-800:#5C5345;
  --ink:#1F1D1A; --ink-soft:#34302A; --espresso:#2A2620;
  --gold:#C4A45A; --gold-050:#F6EFDD; --gold-100:#ECDDBB; --gold-300:#D8C089;
  --gold-600:#AE8C43; --gold-700:#8E7034;
  --success:#5E7A52; --warning:#B07F2E;
  --fd:'Jost',system-ui,sans-serif; --fb:'Mulish',system-ui,sans-serif;
  --eb:0.28em;

  width:390px; height:844px; position:relative; flex:none;
  background:#000; border-radius:52px; overflow:hidden;
  box-shadow:0 40px 80px rgba(0,0,0,0.22), 0 0 0 1px rgba(0,0,0,0.14);
  font-family:var(--fb); -webkit-font-smoothing:antialiased;
  color:var(--ink); user-select:none;
}
.lt-phone *{ box-sizing:border-box; }

/* dynamic island */
.lt-island{ position:absolute; top:11px; left:50%; transform:translateX(-50%);
  width:124px; height:36px; border-radius:24px; background:#000; z-index:60; }

/* status bar */
.lt-status{ position:absolute; top:0; left:0; right:0; height:54px; z-index:55;
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 34px 0; pointer-events:none; }
.lt-status .t{ font-family:-apple-system,'SF Pro',system-ui; font-weight:600;
  font-size:16px; letter-spacing:0.2px; }

/* scroll surface */
.lt-scroll{ position:absolute; inset:0; overflow-y:auto; overflow-x:hidden;
  -webkit-overflow-scrolling:touch; background:var(--ivory); }
.lt-scroll::-webkit-scrollbar{ width:0; height:0; }
.lt-phone[data-dark] .lt-scroll{ background:var(--espresso); }

/* home indicator */
.lt-home{ position:absolute; bottom:0; left:0; right:0; height:30px; z-index:60;
  display:flex; justify-content:center; align-items:flex-end; padding-bottom:8px;
  pointer-events:none; }
.lt-home i{ width:134px; height:5px; border-radius:99px; background:rgba(0,0,0,0.28); }
.lt-phone[data-dark] .lt-home i{ background:rgba(255,255,255,0.6); }

/* screen mount + transition */
.lt-screen{ min-height:100%; }

/* ---------- type helpers ---------- */
.lt-eyebrow{ font-family:var(--fb); font-size:11px; font-weight:600; letter-spacing:var(--eb);
  text-transform:uppercase; color:var(--gold-700); }
.lt-phone[data-dark] .lt-eyebrow{ color:var(--gold-300); }
.lt-disp{ font-family:var(--fd); font-weight:300; letter-spacing:-0.01em; line-height:1.06; color:var(--ink); }
.lt-h{ font-family:var(--fd); font-weight:400; line-height:1.14; color:var(--ink); }
.lt-phone[data-dark] .lt-disp,.lt-phone[data-dark] .lt-h{ color:#F6F1E8; }
.lt-sub{ color:var(--stone-600); font-size:14px; line-height:1.6; }
.lt-phone[data-dark] .lt-sub{ color:#B9AD96; }
.lt-rule{ height:2px; width:34px; background:var(--gold); border:0; }

/* ---------- buttons ---------- */
.lt-btn{ display:flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--fb); font-weight:600; font-size:15px; letter-spacing:0.02em;
  height:54px; border:0; cursor:pointer; width:100%;
  background:var(--gold); color:#2A2620; border-radius:0;
  transition:background var(--dur,260ms) var(--ease,ease), transform 120ms ease;
  box-shadow:0 8px 30px rgba(196,164,90,0.22); }
.lt-btn:hover{ background:var(--gold-600); }
.lt-btn:active{ transform:translateY(1px); }
.lt-btn.ghost{ background:transparent; color:var(--ink); border:1px solid var(--taupe-200);
  box-shadow:none; font-weight:600; }
.lt-btn.ghost:hover{ background:var(--gold-050); border-color:var(--gold-300); }
.lt-phone[data-dark] .lt-btn.ghost{ color:#F6F1E8; border-color:rgba(255,255,255,0.16); }
.lt-phone[data-dark] .lt-btn.ghost:hover{ background:rgba(196,164,90,0.12); border-color:var(--gold); }
.lt-btn.lg{ height:56px; font-size:16px; }

.lt-chip{ font-family:var(--fb); font-size:13px; font-weight:600; letter-spacing:0.02em;
  padding:9px 15px; border:1px solid var(--taupe-200); background:var(--paper);
  color:var(--umber-800); cursor:pointer; border-radius:2px; white-space:nowrap;
  transition:all 200ms var(--ease,ease); }
.lt-chip:hover{ border-color:var(--gold-300); }
.lt-chip[data-on="true"]{ background:var(--ink); color:#F6F1E8; border-color:var(--ink); }
.lt-phone[data-dark] .lt-chip{ background:rgba(255,255,255,0.04); border-color:rgba(255,255,255,0.14); color:#E7DFD2; }
.lt-phone[data-dark] .lt-chip[data-on="true"]{ background:var(--gold); color:#2A2620; border-color:var(--gold); }

/* ---------- cards ---------- */
.lt-card{ background:var(--paper); border:1px solid var(--taupe-200); border-radius:0;
  box-shadow:0 2px 8px rgba(43,38,32,0.05); }
.lt-card.gold-top{ border-top:2px solid var(--gold); }
.lt-phone[data-dark] .lt-card{ background:rgba(255,255,255,0.045); border-color:rgba(255,255,255,0.10); box-shadow:none; }

/* ---------- tab bar ---------- */
.lt-tabs{ position:absolute; bottom:0; left:0; right:0; z-index:40; height:92px;
  padding:10px 14px 30px; display:flex; align-items:flex-start; justify-content:space-around;
  background:rgba(250,247,242,0.86); backdrop-filter:blur(18px) saturate(160%);
  -webkit-backdrop-filter:blur(18px) saturate(160%); border-top:1px solid var(--taupe-200); }
.lt-phone[data-dark] .lt-tabs{ background:rgba(28,25,21,0.82); border-top-color:rgba(255,255,255,0.08); }
.lt-tab{ display:flex; flex-direction:column; align-items:center; gap:5px; cursor:pointer;
  color:var(--taupe-400); background:none; border:0; padding:6px 10px; flex:1; }
.lt-tab span{ font-size:10px; font-weight:600; letter-spacing:0.06em; text-transform:uppercase; }
.lt-tab[data-on="true"]{ color:var(--gold-700); }
.lt-phone[data-dark] .lt-tab{ color:rgba(235,235,245,0.4); }
.lt-phone[data-dark] .lt-tab[data-on="true"]{ color:var(--gold); }

/* ---------- sliders ---------- */
.lt-slider{ -webkit-appearance:none; appearance:none; width:100%; height:6px; border-radius:0;
  background:var(--taupe-200); outline:none; cursor:pointer; }
.lt-slider::-webkit-slider-thumb{ -webkit-appearance:none; appearance:none; width:26px; height:26px;
  border-radius:50%; background:var(--gold); border:3px solid #fff; box-shadow:0 2px 8px rgba(43,38,32,0.25); cursor:pointer; }
.lt-phone[data-dark] .lt-slider{ background:rgba(255,255,255,0.14); }
.lt-phone[data-dark] .lt-slider::-webkit-slider-thumb{ border-color:#2A2620; }

/* toggle */
.lt-toggle{ width:50px; height:30px; border-radius:99px; background:var(--taupe-200); position:relative;
  cursor:pointer; transition:background 240ms var(--ease,ease); flex:none; border:0; }
.lt-toggle::after{ content:''; position:absolute; top:3px; left:3px; width:24px; height:24px;
  border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,0.2); transition:transform 240ms var(--ease,ease); }
.lt-toggle[data-on="true"]{ background:var(--gold); }
.lt-toggle[data-on="true"]::after{ transform:translateX(20px); }
.lt-phone[data-dark] .lt-toggle{ background:rgba(255,255,255,0.16); }

/* image cover */
.lt-img{ width:100%; height:100%; object-fit:cover; display:block; }

/* small status dot */
.lt-dot{ width:7px; height:7px; border-radius:50%; background:var(--success); display:inline-block; }

/* messaging bubbles */
.lt-bub{ max-width:78%; padding:11px 14px; font-size:14.5px; line-height:1.5; border-radius:2px; }
.lt-bub.host{ background:var(--paper); border:1px solid var(--taupe-200); color:var(--ink); align-self:flex-start; }
.lt-bub.me{ background:var(--ink); color:#F6F1E8; align-self:flex-end; }

/* fade-in util for late content */
.lt-fade{ animation:ltFade 420ms var(--ease,ease); }
@keyframes ltFade{ from{ opacity:0; } to{ opacity:1; } }