/* ============================================================
   StraBar Design System — Tokens
   Dark mode only. Warm-black surfaces + cream-gold accent.
   ============================================================ */

:root {
  /* ---------- Core palette (warm dark) ---------- */
  --sb-background:    rgb(20  18  16);    /* #141210 — app background */
  --sb-surface:       rgb(30  28  24);    /* #1E1C18 — card / sheet */
  --sb-elevated:      rgb(42  39  32);    /* #2A2720 — chips, fields, raised */
  --sb-elevated-2:    rgb(54  50  41);    /* #36322A — pressed / hover surface */
  --sb-hairline:      rgba(255 255 255 / .07); /* dividers, hairlines */
  --sb-hairline-2:    rgba(255 255 255 / .12); /* stronger borders */

  /* ---------- Accent (the StraBar gold) ---------- */
  --sb-accent:        rgb(242 217 140);   /* #F2D98C — the one gold */
  --sb-accent-light:  rgb(247 232 176);   /* #F7E8B0 — hover / highlight */
  --sb-accent-soft:   rgb(251 244 217);   /* #FBF4D9 — soft text on dark */
  --sb-accent-12:     rgba(242 217 140 / .12); /* badge / pill bg */
  --sb-accent-20:     rgba(242 217 140 / .20);
  --sb-accent-35:     rgba(242 217 140 / .35); /* glow shadow */

  /* ---------- Foreground (text) ---------- */
  --sb-fg:            rgb(245 240 230);   /* primary text on dark */
  --sb-fg-2:          rgba(245 240 230 / .72); /* secondary text */
  --sb-fg-3:          rgba(245 240 230 / .48); /* tertiary, captions */
  --sb-fg-4:          rgba(245 240 230 / .28); /* disabled, placeholders */

  /* ---------- Semantic colors (used sparingly) ---------- */
  --sb-live:          rgb(232  74  64);   /* #E84A40 — LIVE dot, danger */
  --sb-live-12:       rgba(232  74  64 / .12);
  --sb-group:         rgb(176 138 232);   /* #B08AE8 — group outings only */
  --sb-group-15:      rgba(176 138 232 / .15);
  --sb-success:       rgb(116 196 132);   /* #74C484 — confirmations */
  --sb-warning:       rgb(232 176  88);   /* #E8B058 */

  /* ---------- Radii (matches SwiftUI cornerRadius values) ---------- */
  --sb-r-xs: 7px;   /* settings icon tile */
  --sb-r-sm: 9px;   /* secondary button */
  --sb-r-md: 10px;  /* picker icon badge */
  --sb-r-lg: 12px;  /* input field */
  --sb-r-xl: 14px;  /* picker row */
  --sb-r-2xl:16px;  /* card, primary button */
  --sb-r-3xl:20px;  /* big sheet */
  --sb-r-pill: 999px;

  /* ---------- Shadows (cards float subtly on dark) ---------- */
  --sb-shadow-card:  0 3px 10px rgba(0 0 0 / .35);
  --sb-shadow-lift:  0 8px 24px rgba(0 0 0 / .45);
  --sb-shadow-glow:  0 4px 18px var(--sb-accent-35);

  /* ---------- Spacing (iOS-style 4pt grid) ---------- */
  --sb-s-1:  4px;
  --sb-s-2:  8px;
  --sb-s-3:  12px;
  --sb-s-4:  14px;   /* OutingCard inner padding */
  --sb-s-5:  16px;   /* standard screen edge */
  --sb-s-6:  20px;
  --sb-s-7:  24px;
  --sb-s-8:  32px;

  /* ---------- Touch / hit targets ---------- */
  --sb-tap-min: 44px;

  /* ---------- Typography stack ----------
     The app uses SF Pro (system) everywhere, with .rounded design for the
     StraBar wordmark and big numerals. We mirror that on web with
     -apple-system + a rounded fallback. */
  --sb-font-sans:   -apple-system, BlinkMacSystemFont, "SF Pro Text",
                    "Helvetica Neue", Helvetica, Arial, sans-serif;
  --sb-font-rounded:"SF Pro Rounded", -apple-system, "Nunito",
                    "Helvetica Neue", sans-serif;

  /* ---------- Type ramp (matches SwiftUI font roles) ---------- */
  --sb-t-largeTitle:   34px;  /* "StraBar" wordmark, screen heroes */
  --sb-t-title1:       28px;
  --sb-t-title2:       22px;
  --sb-t-title3:       20px;  /* big numerals on profile stats */
  --sb-t-headline:     17px;  /* section headers, bold */
  --sb-t-body:         17px;  /* primary reading */
  --sb-t-callout:      16px;
  --sb-t-subhead:      15px;  /* card titles, buttons */
  --sb-t-footnote:     13px;
  --sb-t-caption:      12px;
  --sb-t-caption2:     11px;
  --sb-t-micro:        9px;   /* LIVE badge */
}

/* ============================================================
   Semantic element styles — use these to compose
   ============================================================ */

html, body {
  background: var(--sb-background);
  color: var(--sb-fg);
  font-family: var(--sb-font-sans);
  font-size: var(--sb-t-body);
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
}

.sb-largeTitle {
  font-family: var(--sb-font-rounded);
  font-size: var(--sb-t-largeTitle);
  font-weight: 700;
  letter-spacing: -0.5px;
  color: var(--sb-fg);
}
.sb-title2 {
  font-size: var(--sb-t-title2);
  font-weight: 700;
  color: var(--sb-fg);
}
.sb-title3 {
  font-size: var(--sb-t-title3);
  font-weight: 700;
  color: var(--sb-fg);
}
.sb-headline {
  font-size: var(--sb-t-headline);
  font-weight: 600;
  color: var(--sb-fg);
}
.sb-body {
  font-size: var(--sb-t-body);
  color: var(--sb-fg);
}
.sb-subhead {
  font-size: var(--sb-t-subhead);
  color: var(--sb-fg);
}
.sb-caption {
  font-size: var(--sb-t-caption);
  color: var(--sb-fg-2);
}
.sb-footnote {
  font-size: var(--sb-t-footnote);
  color: var(--sb-fg-2);
}
.sb-mono-numeral { /* big stat numerals */
  font-family: var(--sb-font-rounded);
  font-feature-settings: "tnum" 1;
  font-weight: 700;
}

/* ---------- Surfaces ---------- */
.sb-card {
  background: var(--sb-surface);
  border-radius: var(--sb-r-2xl);
  box-shadow: var(--sb-shadow-card);
  border: 1px solid var(--sb-hairline);
}
.sb-elevated {
  background: var(--sb-elevated);
  border-radius: var(--sb-r-lg);
}

/* ---------- Buttons ---------- */
.sb-btn-primary {
  background: var(--sb-accent);
  color: rgb(20 18 16);
  font-weight: 600;
  font-size: var(--sb-t-subhead);
  height: 50px;
  border-radius: var(--sb-r-lg);
  padding: 0 var(--sb-s-7);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  cursor: pointer;
}
.sb-btn-secondary {
  background: var(--sb-elevated);
  color: var(--sb-fg);
  font-weight: 600;
  font-size: var(--sb-t-subhead);
  height: 34px;
  border-radius: var(--sb-r-sm);
  padding: 0 var(--sb-s-5);
  border: 0;
  cursor: pointer;
}
.sb-btn-ghost {
  background: transparent;
  color: var(--sb-accent);
  font-weight: 600;
  font-size: var(--sb-t-subhead);
  border: 0;
  cursor: pointer;
}

/* ---------- Pills / chips ---------- */
.sb-pill {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 5px 10px;
  background: var(--sb-accent-12);
  color: var(--sb-accent);
  border-radius: var(--sb-r-pill);
  font-size: var(--sb-t-caption);
  font-weight: 500;
}
.sb-pill-neutral {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 5px 10px;
  background: var(--sb-elevated);
  color: var(--sb-fg-2);
  border-radius: var(--sb-r-pill);
  font-size: var(--sb-t-caption);
}

/* ---------- Inputs ---------- */
.sb-input {
  background: var(--sb-elevated);
  color: var(--sb-fg);
  font-size: var(--sb-t-body);
  border: 0;
  border-radius: var(--sb-r-lg);
  padding: 14px 16px;
  width: 100%;
}
.sb-input::placeholder { color: var(--sb-fg-4); }

/* ---------- Icon badge (44×44, used everywhere) ---------- */
.sb-icon-badge {
  width: 44px; height: 44px;
  border-radius: var(--sb-r-md);
  background: var(--sb-accent-12);
  color: var(--sb-accent);
  display: inline-flex; align-items: center; justify-content: center;
}