/* TapPass brand stylesheet · import after fonts/fonts.css
   Tokens, the backdrop system, and the recurring components.
   The rules behind these values live in references/brand-guide.md */

:root {
  --night: #0A130E;       /* dark surfaces */
  --green-deep: #146430;  /* the brand action color */
  --green: #1F6B3A;       /* accents, links */
  --mint: #6FCF8E;        /* SEMANTIC: passed, success. never decoration */
  --amber: #E5A34C;       /* SEMANTIC: held, waiting for a person */
  --amber-deep: #B4690E;
  --ink: #0F1612;
  --cream: #F2EFE7;       /* text on dark */
  --cream-dim: #CFCEC4;
  --cream-faint: #9DA89E;
  --paper: #F4F2EA;       /* light surfaces */
  --tile-dark: #11291C;   /* card surface on night */
}

* { margin: 0; box-sizing: border-box; }
body { font-family: 'Inter', sans-serif; }

/* ==== type roles ==== */
.display { font-family: 'Fraunces', serif; font-weight: 340; letter-spacing: -.01em; line-height: 1.12; }
.brandvoice { font-family: 'Space Grotesk', sans-serif; font-weight: 500; letter-spacing: -.01em; }
.eyebrow { font-family: 'Space Grotesk', sans-serif; font-weight: 500; font-size: 13px;
  letter-spacing: .16em; text-transform: uppercase; color: #9fc7ab; }

/* ==== the photographic green backdrop (never a flat gradient) ==== */
.backdrop { position: absolute; inset: 0; overflow: hidden; }
.backdrop .mesh { position: absolute; inset: -80px; filter: blur(46px) saturate(1.05);
  background:
    radial-gradient(1100px 800px at 8% 8%,   #2e6b52 0%, transparent 55%),
    radial-gradient(900px 900px at 38% 120%, #0d2a1e 0%, transparent 60%),
    radial-gradient(1000px 700px at 82% 18%, #71875f 0%, transparent 55%),
    radial-gradient(800px 800px at 105% 95%, #3c5a41 0%, transparent 55%),
    linear-gradient(112deg, #0e2820 0%, #1a4030 40%, #2c5640 68%, #4a5f45 100%); }
.backdrop .streaks { position: absolute; inset: 0; mix-blend-mode: soft-light; opacity: .5;
  background:
    linear-gradient(115deg, transparent 22%, rgba(255,252,240,.35) 34%, transparent 46%),
    linear-gradient(115deg, transparent 58%, rgba(255,252,240,.18) 68%, transparent 78%); }
.backdrop .grain { position: absolute; inset: 0; opacity: .16; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E"); }
.backdrop .vig { position: absolute; inset: 0;
  background: radial-gradient(130% 140% at 50% 42%, transparent 55%, rgba(4,12,8,.42) 100%); }

/* ==== glass panel ==== */
.glass { background: rgba(255,255,255,.055); border: 1px solid rgba(255,255,255,.13);
  border-bottom-color: rgba(255,255,255,.06); border-radius: 20px;
  backdrop-filter: blur(16px) saturate(1.15);
  box-shadow: 0 24px 60px rgba(3,10,6,.35), inset 0 1px 0 rgba(255,255,255,.18); }

/* ==== buttons ==== */
.btn-solid { display: inline-block; padding: 13px 26px; border-radius: 12px;
  background: var(--cream); color: var(--ink); font-weight: 600; font-size: 16px; }
.btn-ghost { color: var(--cream); font-weight: 500; font-size: 16px; }
.btn-green { display: inline-block; padding: 13px 26px; border-radius: 12px;
  background: var(--green-deep); color: #fff; font-weight: 600; font-size: 16px; }

/* ==== the Allow button motif (always with the cursor) ==== */
.allow-btn { position: relative; display: inline-block; padding: 10px 24px; border-radius: 10px;
  background: #E8E5DA; color: #1c1b16; font-weight: 600; font-size: 15px;
  box-shadow: 0 10px 26px rgba(0,0,0,.3); }
.allow-btn .cursor { position: absolute; right: -11px; bottom: -13px; width: 19px;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.35)); }

/* ==== status pills (semantic colors only) ==== */
.pill { display: inline-block; font-size: 11.5px; font-weight: 600; border-radius: 7px; padding: 4px 10px; }
.pill.pass { background: #EBF4EE; color: var(--green); }
.pill.held { background: #FBF3E4; color: var(--amber-deep); }
.pill.stop { background: #FBEAEA; color: #B33A3A; }

/* ==== the dot field motif (granted vs used) ==== */
.dotfield { display: flex; flex-wrap: wrap; gap: 6px; }
.dotfield i { width: 10px; height: 10px; border-radius: 50%; background: rgba(217,168,104,.3); }
.dotfield i.used { background: var(--mint); box-shadow: 0 0 10px rgba(111,207,142,.5); }
.dotfield.on-light i { background: #E3E0D4; }
.dotfield.on-light i.used { background: var(--green); box-shadow: 0 0 8px rgba(31,107,58,.35); }