/* Shared base for FLAYSH templates. Uses the brand fonts from type/ so templates render offline,
   and the generated tokens from build/css. Edit tokens, not colours here. */
@import url("../build/css/flaysh.css");
@font-face { font-family: "Anton"; src: url("../type/anton/Anton-Regular.ttf") format("truetype"); font-weight: 400; }
@font-face { font-family: "Geist"; src: url("../type/geist/Geist-Variable.ttf") format("truetype"); font-weight: 100 900; }

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { width: var(--w); height: var(--h); overflow: hidden; }
body { background: var(--flaysh-void); color: var(--flaysh-ink); font-family: var(--flaysh-font-text); position: relative; }
body.alpha { background: transparent; }
.abs { position: absolute; }
.title { font-family: var(--flaysh-font-title); text-transform: uppercase; line-height: .92; letter-spacing: .005em; }
.label { font-family: var(--flaysh-font-text); font-weight: 500; text-transform: uppercase; letter-spacing: .08em; }
.red { color: var(--flaysh-red); }
.violet { color: var(--flaysh-violet); }
.lav { color: var(--flaysh-lavender); }
.muted { color: var(--flaysh-muted); }
.logo { display: block; }
.glow-violet { position: absolute; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--flaysh-violet) 55%, transparent), transparent); }
.motif { position: absolute; background-color: var(--flaysh-red); -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat; filter: drop-shadow(0 0 18px color-mix(in srgb, var(--flaysh-red) 60%, transparent)); }
.mark { position: absolute; -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat; }