/* ==========================================================================
   HEAVEN ECO HUB — The Heavenly Design System  ·  v2.0 Heavenly Edition
   Sky · Cloud · Gold · White

   Applied to the SHELL of Coda Blocks — home, arcade hub, shop, locker,
   avatar studio, game builder, verify, policies. The games themselves
   (play/snorble/lastlight/cove/arcade/*) and the map maker keep their own
   committed dark arcade look; this file must never be linked from those.

   Sovereign: fonts are self-hosted in web/fonts (SIL Open Font License).
   Zero third-party requests at runtime, so it works identically in the
   both native WebView shells and in both offline bundles.
   ========================================================================== */

/* ---------- 03 · TYPOGRAPHY — a luxe serif & sans trio ---------- */
@font-face{font-family:Cinzel;src:url(fonts/cinzel-600.woff2) format("woff2");
  font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:Cinzel;src:url(fonts/cinzel-700.woff2) format("woff2");
  font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:Cormorant;src:url(fonts/cormorant-600.woff2) format("woff2");
  font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:Poppins;src:url(fonts/poppins-400.woff2) format("woff2");
  font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Poppins;src:url(fonts/poppins-500.woff2) format("woff2");
  font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:Poppins;src:url(fonts/poppins-600.woff2) format("woff2");
  font-weight:600;font-style:normal;font-display:swap}

:root{
  /* ---------- 01 · COLOUR PALETTE ---------- */
  /* Heavenly Sky */
  --sky-01:#ECF6FF; --sky-02:#C6E2FF; --sky-03:#AFD6F6;
  --azure:#8FBFE8;  --gold-glow:#FBF0CD;
  /* Gold */
  --gold-100:#F2D78C; --gold-200:#E6C56D; --gold-300:#D3AB54;
  --gold-400:#B8933F; --gold-500:#A8812F;
  /* --gold-ink is the ONLY gold safe for small text. The kit's display golds are
     tuned for fills and large caps: #B8933F reads 2.6:1 on white and #A8812F
     3.6:1, both below the 4.5:1 floor for body-size text. This deep antique gold
     holds the brand at 6.1:1. Use the display golds for fills, caps and rules. */
  --gold-ink:#7A5E1C;
  /* Neutrals & text */
  --white:#FFFFFF;
  --glass:rgba(255,255,255,.62);
  --glass-solid:rgba(255,255,255,.86);
  --heaven-muted:#5F6B79;
  --heaven-body:#414B57;
  --ink:#28313D;

  /* ---------- 02 · SIGNATURE GRADIENTS ---------- */
  --grad-gold:linear-gradient(135deg,var(--gold-100) 0%,var(--gold-300) 55%,var(--gold-500) 100%);
  --grad-sky:linear-gradient(180deg,var(--sky-01) 0%,var(--sky-02) 42%,var(--sky-03) 72%,var(--gold-glow) 100%);
  --grad-halo:radial-gradient(60% 55% at 50% 30%,rgba(251,240,205,.95) 0%,rgba(251,240,205,.45) 38%,rgba(236,246,255,0) 72%);

  /* Frosted-glass furniture */
  --hairline:rgba(255,255,255,.9);
  --gold-hairline:linear-gradient(90deg,rgba(210,171,84,0),var(--gold-300),rgba(210,171,84,0));
  --shadow-soft:0 10px 30px rgba(88,132,178,.16);
  --shadow-lift:0 18px 44px rgba(88,132,178,.24);
  --radius-glass:30px;

  /* ---------- LEGACY TOKEN REMAP ----------
     The shell pages were authored against a dark arcade palette and share one
     token vocabulary. Re-pointing those names here re-themes every existing
     rule at once, so page CSS stays readable instead of being rewritten. */
  --ground:var(--sky-01);
  --ground2:#DCEBFB;
  --panel:var(--glass);
  --panel2:var(--glass-solid);
  --line:rgba(126,163,201,.34);
  --text:var(--ink);
  --muted:var(--heaven-muted);
  --radius:20px;

  /* Accents retuned for a light ground. The kit forbids neon, so the arcade
     hues become their deep, legible cousins — same meaning, heavenly manners.
     (The inline SVG key art keeps its own colours; it is artwork, not UI.) */
  --volt:var(--gold-300);
  --magenta:#C2185B;
  --cyan:#1B6E8C;
  --lime:#3F6E22;
  --red:#C0392B;
}

/* ---------- page ground: sky that breathes ---------- */
html{background:var(--sky-01)}
body{
  background:var(--grad-sky) fixed,var(--sky-01);
  color:var(--heaven-body);
  font-family:Poppins,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
}
::selection{background:var(--gold-100);color:var(--ink)}

/* ---------- headings ---------- */
h1,h2,h3,h4{color:var(--ink);font-weight:600}
h1,h2{font-family:Cormorant,Georgia,"Times New Roman",serif;letter-spacing:.005em;line-height:1.15}
h3,h4{font-family:Poppins,system-ui,sans-serif;font-weight:600;letter-spacing:.01em}

/* Cinzel is reserved for the wordmark and monumental caps. */
.hv-wordmark,.hv-display{
  font-family:Cinzel,Georgia,serif;font-weight:700;
  letter-spacing:.03em;text-transform:uppercase;
  background:var(--grad-gold);-webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
}
/* Older WebViews that cannot paint gradient text still get gold, not nothing. */
@supports not ((-webkit-background-clip:text) or (background-clip:text)){
  .hv-wordmark,.hv-display{color:var(--gold-400);-webkit-text-fill-color:var(--gold-400);background:none}
}
.hv-serif{font-family:Cormorant,Georgia,serif;font-weight:600;color:var(--ink)}
.hv-eyebrow{
  font-family:Poppins,sans-serif;font-weight:600;font-size:12px;
  letter-spacing:.22em;text-transform:uppercase;color:var(--gold-ink);
}

/* ---------- 04 · COMPONENTS — glass, gold & frames ---------- */
.hv-glass{
  position:relative;
  background:var(--glass);
  -webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);
  border:1px solid var(--hairline);
  border-radius:var(--radius-glass);
  box-shadow:var(--shadow-soft);
}
/* 2px gold top hairline, per the kit's frosted-glass card spec */
.hv-glass::before{
  content:"";position:absolute;left:0;right:0;top:0;height:2px;
  border-radius:var(--radius-glass) var(--radius-glass) 0 0;
  background:var(--gold-hairline);pointer-events:none;
}
.hv-glass:hover{box-shadow:var(--shadow-lift)}

/* Gold checks & icon badges */
.hv-badge{
  display:inline-grid;place-items:center;width:34px;height:34px;border-radius:11px;
  background:var(--grad-gold);color:#fff;font-weight:600;font-size:15px;
  box-shadow:0 4px 12px rgba(168,129,47,.34);flex:0 0 auto;
}

/* Photo frame · white mat + gold hairline + soft shadow */
.hv-frame{
  background:var(--white);padding:10px;border-radius:22px;
  border:1px solid var(--gold-100);box-shadow:var(--shadow-soft);
}
.hv-frame>*{border-radius:14px;display:block;width:100%}

/* Divine halo behind hero titles */
.hv-halo{position:relative}
.hv-halo::before{
  content:"";position:absolute;inset:-30% -12% -20%;background:var(--grad-halo);
  pointer-events:none;z-index:0;
}
.hv-halo>*{position:relative;z-index:1}

/* Gold rule */
.hv-rule{height:1px;border:0;background:var(--gold-hairline);margin:28px 0}

/* ---------- buttons ---------- */
.hv-btn{
  display:inline-block;font-family:Poppins,sans-serif;font-weight:600;
  font-size:15px;letter-spacing:.02em;text-decoration:none;cursor:pointer;
  padding:13px 26px;border-radius:14px;border:none;
  background:linear-gradient(135deg,var(--gold-100),var(--gold-300));color:var(--ink);
  box-shadow:0 6px 18px rgba(168,129,47,.3);
  transition:transform .14s ease,box-shadow .14s ease;
}
.hv-btn:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(168,129,47,.38)}
.hv-btn:active{transform:translateY(1px);box-shadow:0 4px 12px rgba(168,129,47,.3)}
.hv-btn-ghost{
  background:var(--glass);color:var(--gold-ink);
  border:1px solid var(--gold-100);box-shadow:none;
}
.hv-btn-ghost:hover{border-color:var(--gold-300);background:var(--white);box-shadow:var(--shadow-soft)}

/* ---------- focus, always visible ---------- */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--gold-400);outline-offset:3px;border-radius:6px;
}

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