/* GYM Social Night — design tokens and component styles.
   Brand palette (gym.be): #0F5CCD primary blue, #A3FE38 accent green,
   #3DAFE4 secondary blue, #1A1F2D dark navy, #F5F5F5 light grey.
   The shipped icon set actually uses #2F7BEF/#07132E instead — those stay
   icon-only tokens (--icon-blue/--surface-night) and never leak into UI
   chrome, which uses the documented brand tokens.
   Typography: Futura LT and Articulat CF are commercial and unavailable
   here. Jost (geometric sans, closest free match to Futura's uppercase
   heading shapes) and Figtree (clean grotesk, matches Articulat CF's
   weight range for body/UI) are self-hosted below — swap the two
   @font-face src paths for licensed woff2 files later; nothing else
   changes. */

@font-face {
  font-family: "Jost";
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url("/fonts/jost-variable.woff2") format("woff2");
}
@font-face {
  font-family: "Figtree";
  font-style: normal;
  font-weight: 500 800;
  font-display: swap;
  src: url("/fonts/figtree-variable.woff2") format("woff2");
}

:root {
  /* Brand tokens */
  --color-primary: #0F5CCD;
  --color-accent: #A3FE38;
  --color-secondary: #3DAFE4;
  --color-navy: #1A1F2D;
  --color-grey: #F5F5F5;

  /* Icon-only tokens — never used for UI chrome, see comment above */
  --icon-blue: #2F7BEF;
  --surface-night: #07132E;

  /* Semantic tokens built from the brand palette */
  --color-bg: #FFFFFF;
  --color-bg-muted: var(--color-grey);
  --color-fg: var(--color-navy);
  --color-fg-muted: #5B6070;
  --color-line: #E2E4EA;
  --color-danger: #B3261E;
  --color-success: #1E7A34;
  --color-warning: #8A6D00;

  /* --color-accent (#A3FE38) is ~1.3:1 contrast on white — far below the
     4.5:1 text minimum. It is NEVER used as text color or a button fill
     on a light surface; only as a small dot/underline/badge, or as a
     background with --color-navy text on top (navy-on-accent is ~9:1). */

  --font-heading: "Jost", Helvetica, Arial, sans-serif;
  --font-body: "Figtree", -apple-system, BlinkMacSystemFont, sans-serif;

  --radius-pill: 45px;
  --radius-card: 14px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;

  color-scheme: light;
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 500;
  color: var(--color-fg);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}

h1, h2, h3, .heading {
  font-family: var(--font-heading);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--color-navy);
  margin: 0 0 var(--space-3);
}
h1 { font-size: 1.5rem; }
h2 { font-size: 1.15rem; }
h3 { font-size: 1rem; }

p { line-height: 1.5; margin: 0 0 var(--space-3); }

a { color: var(--color-primary); }

/* Buttons: pill-shaped, ~45px corner radius, bold text */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 0.95rem;
  padding: 0.7rem 1.4rem;
  border-radius: var(--radius-pill);
  border: none;
  cursor: pointer;
  text-decoration: none;
  line-height: 1;
  min-height: 44px; /* touch target */
}
.btn-primary { background: var(--color-primary); color: #fff; }
.btn-primary:active { background: #0C4AA6; }
.btn-secondary { background: var(--color-bg-muted); color: var(--color-navy); }
.btn-danger { background: var(--color-danger); color: #fff; }
.btn-block { width: 100%; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* Segmented control for Coming / Unknown / Not coming */
.segmented { display: flex; border-radius: var(--radius-pill); overflow: hidden; border: 1px solid var(--color-line); }
.segmented button {
  flex: 1; border: none; background: var(--color-bg); color: var(--color-fg-muted);
  font-family: var(--font-body); font-weight: 800; font-size: 0.85rem;
  padding: 0.6rem 0.4rem; cursor: pointer; min-height: 44px;
}
.segmented button.active[data-value="coming"] { background: var(--color-success); color: #fff; }
.segmented button.active[data-value="not_coming"] { background: var(--color-danger); color: #fff; }
.segmented button.active[data-value="unknown"] { background: var(--color-bg-muted); color: var(--color-navy); }

.card {
  background: var(--color-bg);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-card);
  padding: var(--space-4);
  margin-bottom: var(--space-4);
}

.eyebrow {
  font-family: var(--font-heading);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.75rem;
  color: var(--color-primary);
  font-weight: 500;
}

.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--color-accent); }

.pill-badge {
  display: inline-block;
  padding: 0.2rem 0.6rem;
  border-radius: var(--radius-pill);
  font-size: 0.75rem;
  font-weight: 800;
  background: var(--color-accent);
  color: var(--color-navy); /* navy-on-accent: safe contrast, see the comment on --color-accent above */
}

/* App shell */
#app-shell { max-width: 520px; margin: 0 auto; padding: var(--space-4); padding-bottom: 80px; }

nav.tabbar {
  position: fixed; bottom: 0; left: 0; right: 0;
  display: flex; background: #fff; border-top: 1px solid var(--color-line);
  padding-bottom: env(safe-area-inset-bottom);
  max-width: 520px; margin: 0 auto;
}
nav.tabbar button {
  flex: 1; border: none; background: none; padding: 0.7rem 0.2rem;
  font-family: var(--font-body); font-weight: 800; font-size: 0.7rem;
  color: var(--color-fg-muted); cursor: pointer; min-height: 44px;
}
nav.tabbar button.active { color: var(--color-primary); }

header.top-bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--space-3) 0; margin-bottom: var(--space-3);
}
header.top-bar img.logo { height: 28px; }

.lang-switcher {
  max-width: 520px; margin: 0 auto; display: flex; justify-content: flex-end;
  gap: var(--space-2); padding: var(--space-3) var(--space-4) 0;
}
.lang-switcher button {
  font-family: var(--font-body); font-weight: 800; font-size: 0.7rem;
  padding: 0.3rem 0.6rem; border-radius: var(--radius-pill);
  border: 1px solid var(--color-line); background: var(--color-bg);
  color: var(--color-fg-muted); cursor: pointer; min-height: 28px;
}
.lang-switcher button.active { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }

.center-screen { min-height: 60vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: var(--space-3); }

.muted { color: var(--color-fg-muted); font-size: 0.9rem; }

input[type="text"], input[type="email"] {
  font-family: var(--font-body); font-size: 1rem; padding: 0.65rem 0.8rem;
  border-radius: var(--space-2); border: 1px solid var(--color-line); width: 100%;
}

[hidden] { display: none !important; }

@media (max-width: 380px) {
  #app-shell { padding: var(--space-3); }
}