/* =============================================================
   Volley Time — Design Tokens
   Colors, typography, spacing shared across all screens
   ============================================================= */

:root {
  /* Brand palette — sport-energy on warm neutrals */
  --vt-ink:        #0E0E10;       /* near-black */
  --vt-ink-2:      #1C1C20;
  --vt-ink-3:      #2A2A30;
  --vt-stroke:     #E6E2D8;
  --vt-stroke-2:   #DCD6C8;
  --vt-bone:       #F7F3EA;       /* warm cream */
  --vt-bone-2:     #EFEAD9;
  --vt-paper:      #FBF8F0;
  --vt-mute:       #8A877D;
  --vt-mute-2:     #6B6960;

  --vt-flame:      #5168F2;       /* primary action (brand blue) */
  --vt-flame-deep: #3A4FD9;
  --vt-blue-ink:   #1F2E96;       /* deep brand blue (from logo) */
  --vt-blue-soft:  #6FA8E8;       /* light trail blue */
  --vt-orange:     #FF6B1F;       /* brand orange (from logo) */
  --vt-amber:      #FFB627;       /* warning / amber */
  --vt-grass:      #4E7F3B;       /* success */
  --vt-rose:       #D03A4A;       /* danger */
  --vt-court:      #C8842B;       /* volleyball leather tone */

  /* Spacing scale */
  --r-1: 4px; --r-2: 8px; --r-3: 10px; --r-4: 14px; --r-5: 20px; --r-6: 28px;

  /* Typography */
  --f-display: 'Space Grotesk', system-ui, sans-serif;
  --f-body:    'Manrope', system-ui, sans-serif;
  --f-mono:    'JetBrains Mono', ui-monospace, monospace;
}

/* Dark theme tokens (applied via .vt-dark) */
.vt-dark {
  --vt-ink:        #F2EFE6;
  --vt-ink-2:      #DCD8CB;
  --vt-ink-3:      #B8B4A6;
  --vt-stroke:     #2B2A26;
  --vt-stroke-2:   #3A3833;
  --vt-bone:       #15140F;
  --vt-bone-2:     #1C1B16;
  --vt-paper:      #0C0B08;
  --vt-mute:       #6E6C64;
  --vt-mute-2:     #95928A;
}

/* =============================================================
   Reset within frames
   ============================================================= */
.vt-frame *, .vt-frame *::before, .vt-frame *::after {
  box-sizing: border-box;
}
.vt-frame {
  font-family: var(--f-body);
  color: var(--vt-ink);
  background: var(--vt-paper);
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
  line-height: 1.4;
  font-size: 14px;
}

.vt-frame h1, .vt-frame h2, .vt-frame h3, .vt-frame h4 {
  font-family: var(--f-display);
  font-weight: 600;
  letter-spacing: -0.015em;
  margin: 0;
  line-height: 1.1;
}
.vt-frame p { margin: 0; }
.vt-frame button {
  font-family: inherit; font-size: inherit; color: inherit;
  background: none; border: 0; padding: 0; cursor: pointer;
}
.vt-mono { font-family: var(--f-mono); font-feature-settings: "tnum"; }
.vt-num  { font-variant-numeric: tabular-nums; }
.vt-cap  { letter-spacing: 0.08em; text-transform: uppercase; font-size: 11px; font-weight: 600; }

/* =============================================================
   Common atoms
   ============================================================= */

/* Brand mark — uses real PNG logo, sized via font-size. */
.vt-ball {
  display: inline-block;
  width: 1.15em; height: 1.15em;
  background-image: url('assets/logo.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  flex-shrink: 0;
  vertical-align: middle;
}

/* Brand mark stripe */
.vt-stripe {
  display:inline-flex; align-items:center; gap:8px;
  font-family: var(--f-display); font-weight:700;
  letter-spacing: -0.02em;
}
.vt-stripe .vt-ball { width: 1.05em; height: 1.05em; }
.vt-stripe .v-word { font-size:1em; }

/* Buttons */
.vt-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 14px; border-radius: 10px;
  font-weight: 600; font-size: 14px;
  transition: transform .06s, background .15s, border-color .15s;
  border: 1px solid transparent;
  white-space: nowrap;
}
.vt-btn:active { transform: translateY(1px); }
.vt-btn--primary { background: var(--vt-flame); color: #fff; }
.vt-btn--primary:hover { background: var(--vt-flame-deep); }
.vt-btn--ghost { background: transparent; color: var(--vt-ink); border-color: var(--vt-stroke); }
.vt-btn--ghost:hover { background: var(--vt-bone-2); }
.vt-btn--ink { background: var(--vt-ink); color: var(--vt-paper); }
.vt-btn--ink:hover { background: var(--vt-ink-3); }
.vt-btn--sm { padding: 7px 10px; font-size: 12.5px; border-radius: 8px; }
.vt-btn--lg { padding: 14px 18px; font-size: 15.5px; border-radius: 12px; }
.vt-btn--full { width: 100%; }

/* Surface card */
.vt-card {
  background: var(--vt-bone);
  border: 1px solid var(--vt-stroke);
  border-radius: 14px;
}

/* Chips / tags */
.vt-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 9px; border-radius: 999px;
  font-size: 11.5px; font-weight: 600;
  background: var(--vt-bone-2); color: var(--vt-ink);
  border: 1px solid var(--vt-stroke);
}
.vt-chip--solid { background: var(--vt-ink); color: var(--vt-paper); border-color: transparent; }
.vt-chip--flame { background: rgba(81,104,242,0.12); color: var(--vt-flame-deep); border-color: rgba(81,104,242,0.28); }
.vt-chip--orange { background: rgba(255,107,31,0.12); color: #C0490F; border-color: rgba(255,107,31,0.32); }
.vt-chip--amber { background: rgba(255,182,39,0.18); color: #8A5A00; border-color: rgba(255,182,39,0.4); }
.vt-chip--grass { background: rgba(78,127,59,0.12); color: var(--vt-grass); border-color: rgba(78,127,59,0.3); }
.vt-chip--rose  { background: rgba(208,58,74,0.10); color: var(--vt-rose); border-color: rgba(208,58,74,0.3); }
.vt-chip--dot::before {
  content:''; width:6px; height:6px; border-radius:50%; background:currentColor;
}

/* Avatar */
.vt-avi {
  width: 32px; height: 32px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--f-display); font-weight: 600; font-size: 12px;
  background: var(--vt-bone-2); color: var(--vt-ink);
  border: 1px solid var(--vt-stroke);
  flex-shrink: 0;
}
.vt-avi--sm { width: 24px; height: 24px; font-size: 10px; }
.vt-avi--lg { width: 44px; height: 44px; font-size: 15px; }
.vt-avi--flame { background: var(--vt-flame); color: #fff; border-color: transparent; }
.vt-avi--ink { background: var(--vt-ink); color: var(--vt-paper); border-color: transparent; }
.vt-avi--amber { background: var(--vt-amber); color: var(--vt-ink); border-color: transparent; }
.vt-avi--grass { background: var(--vt-grass); color: #fff; border-color: transparent; }
.vt-avi--orange { background: var(--vt-orange); color: #fff; border-color: transparent; }

/* Brand avatar (org icon for VolleyTime — actual logo on white) */
.vt-avi--brand {
  background: #fff url('assets/logo.png') center/72% no-repeat;
  color: transparent;
  border: 1px solid var(--vt-stroke);
}

/* Avatar stack */
.vt-stack { display: inline-flex; }
.vt-stack > * { margin-left: -8px; box-shadow: 0 0 0 2px var(--vt-paper); }
.vt-stack > *:first-child { margin-left: 0; }

/* Field */
.vt-field {
  display: block; width: 100%;
  padding: 11px 12px; border-radius: 10px;
  background: var(--vt-paper);
  border: 1px solid var(--vt-stroke);
  font: inherit; color: var(--vt-ink);
  outline: none;
  transition: border-color .12s, box-shadow .12s;
}
.vt-field:focus {
  border-color: var(--vt-ink);
  box-shadow: 0 0 0 3px rgba(14,14,16,0.08);
}
.vt-label {
  display: block;
  font-size: 12px; font-weight: 600;
  color: var(--vt-mute-2);
  margin-bottom: 6px;
}

/* Divider */
.vt-divider { height: 1px; background: var(--vt-stroke); }

/* Status meter (slot capacity bar) */
.vt-meter {
  height: 4px; background: var(--vt-bone-2); border-radius: 99px; overflow: hidden;
}
.vt-meter > i {
  display: block; height: 100%; background: var(--vt-flame); border-radius: inherit;
}
.vt-meter--grass > i { background: var(--vt-grass); }
.vt-meter--amber > i { background: var(--vt-amber); }

/* iOS phone shell (Telegram-style) */
.vt-phone {
  width: 100%; height: 100%;
  display: flex; flex-direction: column;
  background: var(--vt-paper);
  overflow: hidden;
  position: relative;
}
.vt-phone__status {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 22px 6px;
  font-family: var(--f-display); font-weight: 600; font-size: 14px;
  flex-shrink: 0;
}
.vt-phone__status .right { display: inline-flex; gap: 5px; align-items: center; opacity: 0.85; }
.vt-phone__body { flex: 1; overflow: auto; position: relative; }

/* Mini app header (compact) */
.vt-miniheader {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 16px 12px;
  background: var(--vt-paper);
  position: sticky; top: 0; z-index: 5;
  border-bottom: 1px solid var(--vt-stroke);
}

/* Tab bar at bottom */
.vt-tabbar {
  display: grid; grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--vt-stroke);
  background: var(--vt-paper);
  flex-shrink: 0;
}
.vt-tabbar button {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 9px 0 16px;
  font-size: 10.5px; font-weight: 600;
  color: var(--vt-mute);
}
.vt-tabbar button[data-active="true"] { color: var(--vt-ink); }
.vt-tabbar .ico {
  width: 22px; height: 22px;
  display: flex; align-items: center; justify-content: center;
}

/* Web shell */
.vt-web {
  width: 100%; height: 100%;
  display: grid;
  grid-template-columns: 240px 1fr;
  background: var(--vt-paper);
  overflow: hidden;
}
.vt-web__nav {
  background: var(--vt-bone);
  border-right: 1px solid var(--vt-stroke);
  padding: 22px 14px;
  display: flex; flex-direction: column;
  gap: 4px;
  overflow: auto;
}
.vt-web__nav .navhead {
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--vt-mute);
  padding: 16px 10px 6px;
}
.vt-web__nav a {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: 8px;
  font-size: 13.5px; font-weight: 500; color: var(--vt-ink-3);
  text-decoration: none;
  cursor: pointer;
}
.vt-web__nav a:hover { background: var(--vt-bone-2); color: var(--vt-ink); }
.vt-web__nav a[data-active="true"] {
  background: var(--vt-ink); color: var(--vt-paper);
}
.vt-web__nav a[data-active="true"] .icowrap { color: var(--vt-paper); }
.vt-web__main { overflow: auto; }
.vt-web__topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 28px; gap: 16px;
  border-bottom: 1px solid var(--vt-stroke);
  background: var(--vt-paper);
  position: sticky; top: 0; z-index: 5;
}

/* Density modifiers */
.vt-dense .vt-card { border-radius: 12px; }
.vt-dense .vt-btn { padding: 8px 12px; }