/*
  Shared design tokens for the arh-family-lab app hub.
  Carried over from the Ellamin Courtyard homestay site so every app in this
  hub shares the same warm, glassmorphic look. New apps should link this file
  rather than redefine these values.
*/
:root{
  --bg:#f7f1e8;
  --paper:#fffaf2;
  --surface:#fff;
  --ink:#17211f;
  --muted:#63736f;
  --line:rgba(23,33,31,.14);
  --brand:#12323a;
  --accent:#2f7b67;
  --warm:#c9822c;
  --ok:#1e7b4f;
  --danger:#9f392f;
  --radius:8px;
  --shadow:0 18px 50px rgba(18,50,58,.14);
  --fd:"Playfair Display",Georgia,serif;
  --fb:"DM Sans",system-ui,sans-serif;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
/* Guarantee [hidden] always wins, even over elements that set their own
   display:flex/grid for when they're shown (e.g. overlays, modals). */
[hidden]{display:none !important}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--fb);
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,.fd{font-family:var(--fd)}

.glass-card{
  background:linear-gradient(135deg,rgba(247,241,232,0.72) 0%,rgba(247,241,232,0.45) 100%);
  backdrop-filter:blur(36px) saturate(140%);
  -webkit-backdrop-filter:blur(36px) saturate(140%);
  border:1px solid rgba(247,241,232,0.25);
  border-radius:12px;
  box-shadow:0 30px 80px rgba(18,50,58,0.06),0 0 50px rgba(247,241,232,0.2);
}

button{font-family:var(--fb);cursor:pointer}
.btn{
  border:1px solid var(--line);
  background:var(--surface);
  color:var(--ink);
  border-radius:var(--radius);
  padding:10px 16px;
  font-size:14px;
  font-weight:600;
  transition:transform .12s ease,box-shadow .12s ease;
}
.btn:hover{box-shadow:var(--shadow)}
.btn:active{transform:scale(.97)}
.btn-primary{background:var(--brand);color:#fff;border-color:var(--brand)}
.btn-accent{background:var(--accent);color:#fff;border-color:var(--accent)}
.btn-warm{background:var(--warm);color:#fff;border-color:var(--warm)}
.btn-danger{background:transparent;color:var(--danger);border-color:var(--danger)}
.btn-ghost{background:transparent;border-color:transparent}
.btn:disabled{opacity:.4;cursor:not-allowed}