/* =====================================================================
   MADE BY HMNS — base: reset, page background and layout.
   Uses tokens only.
   ===================================================================== */

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html, body {
  margin: 0;
  min-height: 100%;
  background: var(--bg-base);
  color: var(--text-primary);
  font: var(--weight-regular) var(--text-md) / 1.45 var(--font-sans);
  -webkit-font-smoothing: antialiased;
}
/* body stays transparent so the ambient layer behind it shows through */
body { min-height: 100vh; user-select: none; overflow-x: hidden; background: transparent; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: none; box-shadow: var(--focus-ring); }

svg.i { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* ---- Ambient background: light arc + haze + vignette ------------------ */
.ambient { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none;
  background:
    radial-gradient(1200px 700px at 85% -10%, var(--ambient-glow-1), transparent 60%),
    radial-gradient(900px 600px at 10% 110%, var(--ambient-glow-2), transparent 60%),
    radial-gradient(140% 120% at 50% 40%, transparent 55%, var(--ambient-vignette)),
    linear-gradient(180deg, var(--bg-raised), var(--bg-base) 40%, var(--bg-deep));
}
/* the sweeping arc of light: the rim of a huge lit disc off the top-right corner */
.ambient::before { content: ""; position: absolute; width: var(--ambient-arc-size); height: var(--ambient-arc-size);
  right: var(--ambient-arc-right); top: var(--ambient-arc-top); border-radius: 50%;
  background: radial-gradient(circle at 30% 75%, var(--ambient-disc), transparent 62%);
  border: 1.5px solid var(--ambient-sweep);
  box-shadow: 0 0 60px 4px var(--ambient-bloom), inset 0 0 120px var(--ambient-bloom); filter: blur(0.6px); }
.ambient::after { content: ""; position: absolute; width: var(--ambient-arc-size); height: var(--ambient-arc-size);
  right: var(--ambient-arc-right); top: var(--ambient-arc-top); border-radius: 50%;
  box-shadow: -40px 60px 160px 10px var(--ambient-glow-1); }

/* ---- Page layout ------------------------------------------------------ */
.page { max-width: var(--page-max); margin: 0 auto; padding: var(--space-2) var(--page-gutter) 80px; }
.app-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--card-min-width), 1fr)); gap: var(--grid-gap); }

@media (max-width: 760px) {
  :root { --page-gutter: 16px; --card-min-width: 100%; }
}