/* =========================================================================
   THE MARQUE RESERVE - UI COMPONENTS (shared)
   Depends on tokens.css. Buttons, glass, fields, type, ambient field.
   ========================================================================= */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--noir);color:var(--silver);
  font-family:var(--font-body);font-weight:300;letter-spacing:.01em;line-height:1.65;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
::selection{background:rgba(216,199,160,.25);color:var(--platinum)}
a{color:inherit;text-decoration:none}
img,svg,video{display:block;max-width:100%}
h1,h2,h3,h4,h5{font-family:var(--font-display);color:var(--platinum);font-weight:500;margin:0;line-height:1.05}

/* ---- utilities ---- */
.mono{font-family:var(--font-mono);letter-spacing:var(--tracking-mono);text-transform:uppercase;font-size:.7rem;color:var(--pewter)}
.muted{color:var(--pewter)}
.accent{color:var(--warm-accent)}
.wrap{width:min(var(--maxw),92vw);margin-inline:auto}
.wrap-app{width:min(var(--maxw-app),94vw);margin-inline:auto}
.eyebrow{display:flex;align-items:center;gap:.9rem;margin-bottom:1.4rem}
.eyebrow::before{content:"";width:34px;height:1px;background:linear-gradient(90deg,var(--warm-accent),transparent)}
.hairline{height:1px;background:var(--hairline);border:0;margin:0}

/* ---- ambient opal fire field ---- */
.fire{position:fixed;inset:0;z-index:-2;background:var(--noir);overflow:hidden}
.fire::before,.fire::after{content:"";position:absolute;border-radius:50%;filter:blur(120px);opacity:.5}
.fire::before{width:60vw;height:60vw;left:-10vw;top:-10vw;background:radial-gradient(circle,rgba(38,120,128,.30),transparent 62%)}
.fire::after{width:64vw;height:64vw;right:-14vw;bottom:-8vw;background:radial-gradient(circle,rgba(96,78,150,.26),transparent 62%)}
.fire i{position:absolute;width:50vw;height:50vw;left:30vw;top:35vh;border-radius:50%;filter:blur(140px);opacity:.32;background:radial-gradient(circle,rgba(48,86,150,.5),transparent 60%)}

/* ---- glass surface ---- */
.glass{
  background:var(--glass);
  backdrop-filter:blur(18px) saturate(120%);-webkit-backdrop-filter:blur(18px) saturate(120%);
  border:1px solid var(--hairline);border-radius:var(--r-sm);
}
.card{background:var(--glass);border:1px solid var(--hairline);border-radius:var(--r-md);padding:var(--s-6);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}

/* ---- buttons ---- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  font-family:var(--font-body);font-weight:400;letter-spacing:.08em;font-size:.82rem;text-transform:uppercase;
  padding:.95rem 1.9rem;border-radius:var(--r-xs);border:1px solid var(--hairline);
  color:var(--platinum);cursor:pointer;transition:var(--t) var(--ease);background:var(--glass);
}
.btn:hover{border-color:var(--warm-accent);background:var(--glass-2);transform:translateY(-1px)}
.btn:focus-visible{outline:1px solid var(--warm-accent);outline-offset:3px}
.btn:disabled,.btn[aria-busy="true"]{opacity:.55;cursor:progress;pointer-events:none}
.btn-primary{background:linear-gradient(135deg,rgba(216,199,160,.22),rgba(216,199,160,.06));border-color:rgba(216,199,160,.5);color:var(--wg-hi)}
.btn-primary:hover{background:linear-gradient(135deg,rgba(216,199,160,.34),rgba(216,199,160,.12))}
.btn-ghost{background:transparent;border-color:transparent;color:var(--silver)}
.btn-ghost:hover{color:var(--platinum);background:var(--glass);transform:none}
.btn-sm{padding:.6rem 1.1rem;font-size:.72rem}
.btn-block{width:100%}
.btn-danger{border-color:rgba(232,169,156,.5);color:var(--danger)}

/* ---- form fields ---- */
.field{display:flex;flex-direction:column;gap:.5rem;margin-bottom:1.4rem}
.field label,.label{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--pewter)}
.input,.field input,.field textarea,.field select{
  background:rgba(0,0,0,.25);border:1px solid var(--hairline);border-radius:var(--r-xs);
  padding:.85rem .95rem;color:var(--platinum);font-family:var(--font-body);font-size:.98rem;font-weight:300;transition:var(--t-fast)
}
.input:focus,.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--warm-accent);background:rgba(0,0,0,.4)}
.input:focus-visible,.field input:focus-visible,.field textarea:focus-visible{outline:2px solid var(--warm-accent);outline-offset:2px}
.field textarea{resize:vertical;min-height:96px}

/* ---- chips / tags / badges ---- */
.chip{display:inline-flex;align-items:center;gap:.4rem;padding:.3rem .7rem;border:1px solid var(--hairline);border-radius:var(--r-pill);font-family:var(--font-mono);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:var(--silver)}
.chip-accent{border-color:rgba(216,199,160,.45);color:var(--warm-accent)}
.badge{font-family:var(--font-mono);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:var(--warm-accent)}

/* ---- feedback ---- */
.note{font-size:.86rem;margin:.6rem 0}
.note-error{color:var(--danger)}
.note-ok{color:var(--positive)}

/* ---- reveal ---- */
.reveal{opacity:0;transform:translateY(20px);transition:opacity var(--t-slow) var(--ease),transform var(--t-slow) var(--ease)}
.reveal.in{opacity:1;transform:none}

/* ---- spinner ---- */
.spin{width:18px;height:18px;border:2px solid var(--hairline);border-top-color:var(--warm-accent);border-radius:50%;animation:tmr-spin .8s linear infinite}
@keyframes tmr-spin{to{transform:rotate(360deg)}}

@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .reveal{opacity:1;transform:none}
}