/* ============================================================
   Hing Hoi · shared identity — try.hing-hoi.com
   One stylesheet for home / light / create so all three screens
   read as the same place. Tokens follow the Corporate Identity
   Brief (deep brown-black, warm cream, amber CTA, gold firefly glow).
   ============================================================ */

:root{
  --cream: #f0e6d2;
  --paper: #fffaf0;
  --sand: #fdf6ee;
  --dark-cream: #e6d8c0;
  --night: #140a02;
  --night-2: #0e0702;
  --ink: #1a1208;
  --off-white: #f2ead8;
  --muted: rgba(26,18,8,.5);
  --muted-dark: rgba(242,234,216,.55);
  --honey: #a0622a;
  --honey-light: #d4a86a;
  --gold: #ffd566;
  --leaf: #4a6737;
  --line: rgba(26,18,8,.1);
  --line-dark: rgba(212,168,106,.14);
  --radius-card: 18px;
  --radius-pill: 999px;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:"DM Sans", sans-serif;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,.display{
  font-family:"Gilda Display", serif;
  font-weight:400;
  line-height:1.15;
  margin:0;
}
a{color:inherit;}
button{font-family:inherit;}

/* ---------- shared top bar ---------- */
.topbar{
  position:sticky; top:0; z-index:40;
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; padding:14px 20px;
  background:rgba(240,230,210,.92);
  backdrop-filter: blur(8px);
  border-bottom:1px solid var(--line);
}
.brand{ display:flex; align-items:center; gap:10px; text-decoration:none; }
.brand-mark{ width:34px; height:34px; display:block; }
.brand-word{ font-family:"Gilda Display",serif; font-size:1.15rem; color:var(--ink); }
.brand-sub{ display:block; font-size:.66rem; letter-spacing:.06em; color:var(--muted); font-family:"DM Sans",sans-serif; }
.topbar-links{ display:flex; align-items:center; gap:10px; }
.back-link{
  display:inline-flex; align-items:center; gap:6px;
  font-size:.85rem; font-weight:600; text-decoration:none;
  color:var(--ink); padding:8px 14px; border-radius:var(--radius-pill);
  border:1px solid var(--line); background:var(--paper);
  transition:transform .15s ease, box-shadow .15s ease;
  white-space:nowrap;
}
.back-link:hover{ transform:translateY(-1px); box-shadow:0 6px 16px rgba(26,18,8,.12); }

/* ---------- shared buttons (Corporate Identity Brief §5 CTA) ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:48px; padding:0 24px; border-radius:var(--radius-pill);
  font-weight:500; font-size:.95rem; border:0; cursor:pointer;
  transition: transform .16s ease, box-shadow .16s ease, opacity .16s ease;
  text-decoration:none;
}
.btn:hover{ transform:translateY(-2px); }
.btn:disabled{ opacity:.4; cursor:not-allowed; transform:none; }
.btn-primary{ background:var(--honey); color:var(--off-white); box-shadow:0 4px 18px rgba(160,98,42,.3); }
.btn-ghost{ background:transparent; color:var(--ink); border:1.5px solid var(--line); }
.btn-dark{ background:var(--ink); color:var(--off-white); }
.btn-on-dark{ background:transparent; color:var(--off-white); border:1.5px solid var(--line-dark); }

footer{
  text-align:center; padding:40px 20px 60px; color:var(--muted); font-size:.85rem;
}
footer a{ color:var(--ink); font-weight:700; text-decoration:none; border-bottom:1px solid var(--ink); }
.sr-only{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); }

/* ---------- the firefly dot: the one signature element every screen carries ---------- */
.ff-field{ position:absolute; inset:0; overflow:hidden; pointer-events:none; }
.ff-dot{
  position:absolute; border-radius:50%; background:var(--gold);
  box-shadow: 0 0 10px 3px rgba(255,213,102,.55), 0 0 22px 7px rgba(255,213,102,.22);
}
@keyframes ff{
  0%,100%{ opacity:.35; transform:translate(0,0) scale(1); }
  40%{ opacity:1; transform:translate(5px,-11px) scale(1.25); }
  75%{ opacity:.6; transform:translate(-4px,-5px) scale(.9); }
}
@keyframes ffb{
  0%,100%{ opacity:.3; transform:translate(0,0) scale(1); }
  45%{ opacity:1; transform:translate(-7px,-9px) scale(1.2); }
  80%{ opacity:.55; transform:translate(3px,-3px) scale(.92); }
}
@keyframes ffc{
  0%,100%{ opacity:.4; transform:translate(0,0) scale(1); }
  50%{ opacity:.95; transform:translate(6px,8px) scale(1.15); }
  85%{ opacity:.6; transform:translate(-3px,4px) scale(.95); }
}
@media (prefers-reduced-motion: reduce){
  .ff-dot{ animation:none !important; opacity:.7 !important; }
}
@keyframes fadeIn{
  from{ opacity:0; transform:translateY(5px); }
  to{ opacity:1; transform:translateY(0); }
}