/* ============================================================
   UROCON Challenge — Live Scoring System
   Shared design tokens & base styles
   ============================================================ */

:root{
  --ink:        #171923;
  --ink-soft:   #4B4F5C;
  --slate:      #7A7F8C;
  --paper:      #F3F4F8;
  --card:       #FFFFFF;
  --border:     #E4E6EE;
  --border-soft:#EEF0F5;

  --primary:      #5B3DF5;
  --primary-dark: #4327D6;
  --primary-soft: #EFECFE;
  --primary-line: #D9D2FC;

  --gold:       #B8891F;
  --gold-soft:  #FBF2DD;

  --success:      #17944F;
  --success-soft: #E4F7EC;
  --danger:       #D53F3F;
  --danger-soft:  #FBE7E7;
  --warning:      #C6821D;
  --warning-soft: #FCF0DD;

  --radius-s: 8px;
  --radius-m: 14px;
  --radius-l: 22px;

  --shadow-card: 0 1px 2px rgba(23,25,35,.04), 0 8px 24px -12px rgba(23,25,35,.10);
  --shadow-pop:  0 4px 10px rgba(23,25,35,.06), 0 20px 40px -16px rgba(23,25,35,.18);

  --font-display: 'Manrope', 'Segoe UI', sans-serif;
  --font-body:    'Inter', 'Segoe UI', sans-serif;
  --font-mono:    'IBM Plex Mono', 'SFMono-Regular', monospace;
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
  font-family:var(--font-body);
  background:var(--paper);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
}
img{ max-width:100%; display:block; }
button{ font-family:inherit; cursor:pointer; }
input,select{ font-family:inherit; }
a{ color:inherit; }

::selection{ background:var(--primary-line); }

/* focus visibility */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--primary);
  outline-offset:2px;
  border-radius:6px;
}

/* ---------- top brand bar (shared) ---------- */
.brandbar{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 28px;
  background:var(--card);
  border-bottom:1px solid var(--border);
}
.brand{
  display:flex; align-items:center; gap:10px;
}
.brand__mark{
  width:34px;height:34px;border-radius:9px;
  background:linear-gradient(155deg,var(--primary),var(--primary-dark));
  display:flex;align-items:center;justify-content:center;
  color:#fff; font-family:var(--font-display); font-weight:800; font-size:14px;
  box-shadow:0 6px 14px -6px rgba(91,61,245,.55);
}
.brand__text{ font-family:var(--font-display); font-weight:800; font-size:15px; letter-spacing:.01em; }
.brand__sub{ font-size:11px; color:var(--slate); font-weight:600; letter-spacing:.04em; text-transform:uppercase; margin-top:1px;}
.crumb{ font-size:12.5px; color:var(--slate); display:flex; gap:6px; align-items:center;}
.crumb b{ color:var(--ink); font-weight:600; }
.crumb .sep{ opacity:.5; }

/* ---------- generic pill / badge ---------- */
.pill{
  display:inline-flex; align-items:center; gap:6px;
  padding:4px 12px; border-radius:999px;
  font-size:11.5px; font-weight:700; letter-spacing:.03em; text-transform:uppercase;
}
.pill--primary{ background:var(--primary-soft); color:var(--primary-dark); }
.pill--gold{ background:var(--gold-soft); color:var(--gold); }

/* status chip */
.status{
  display:inline-flex; align-items:center; gap:6px;
  padding:5px 13px; border-radius:999px;
  font-size:11px; font-weight:800; letter-spacing:.04em; text-transform:uppercase;
  border:1px solid transparent;
}
.status::before{ content:''; width:6px; height:6px; border-radius:50%; background:currentColor; }
.status--active{ background:var(--success-soft); color:var(--success); }
.status--closed{ background:var(--danger-soft); color:var(--danger); }
.status--upcoming{ background:var(--warning-soft); color:var(--warning); }

/* ---------- scrollbar niceties ---------- */
::-webkit-scrollbar{ height:8px; width:8px; }
::-webkit-scrollbar-thumb{ background:#D6D9E3; border-radius:8px; }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
}