/* ============================================================
   base.css
   CSS custom properties, reset, and typography.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=DM+Mono:ital,wght@0,300;0,400;0,500;1,300&family=Syne:wght@400;600;700;800&display=swap');

/* ── Variables ──────────────────────────────────────────────── */

:root {
  /* Brand */
  --uc-red:       #b8011c;
  --uc-red-dim:   #890519;
  --uc-red-glow:  #E00122;

  /* Backgrounds */
  --bg-void:      #5c5c5c;
  --bg-dark:      #0A0A0A;
  --bg-panel:     #111111;
  --bg-card:      #161616;
  --bg-hover:     #333333;

  /* Borders */
  --border-dim:   #1e1e1e;
  --border-base:  #272727;
  --border-lit:   #3a3a3a;

  /* Text */
  --text-primary:  #f3f3f3;
  --text-secondary: #e0dfe3;
  --text-muted:    #a7a5aa;

  /* Accents */
  --green:        #f0b348;
  --green-glow:   rgba(0,200,80,0.25);
  --amber:        #d1b179;
  --amber-glow:   #eadbc1;
  --blue:         #7C7184;
  --blue-glow:    #503A59;

  /* Typography */
  --font-sans:    'Syne', sans-serif;
  --font-mono:    'DM Mono', monospace;

  /* Spacing */
  --space-xs:  4px;
  --space-sm:  8px;
  --space-md:  16px;
  --space-lg:  24px;
  --space-xl:  32px;

  /* Radii */
  --radius-sm: 3px;
  --radius-md: 6px;
  --radius-lg: 10px;

  /* Transitions */
  --transition-fast:   0.12s ease;
  --transition-base:   0.22s ease;
  --transition-slow:   0.4s ease;

  /* Sidebar */
  --sidebar-width: 360px;
  --header-height: 56px;
}

/* ── Reset ──────────────────────────────────────────────────── */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  height: 100%;
  overflow-x: hidden;
}

body {
  font-family: var(--font-sans);
  background: var(--bg-void);
  color: var(--text-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.5;
}

/* ── Base elements ──────────────────────────────────────────── */

button {
  font-family: inherit;
  cursor: pointer;
}

select {
  font-family: inherit;
}

a {
  color: var(--blue);
  text-decoration: none;
}

/* ── Scrollbar ──────────────────────────────────────────────── */

::-webkit-scrollbar         { width: 4px; height: 4px; }
::-webkit-scrollbar-track   { background: transparent; }
::-webkit-scrollbar-thumb   { background: var(--border-base); border-radius: 2px; }
::-webkit-scrollbar-thumb:hover { background: var(--border-lit); }

/* ── Utility classes ─────────────────────────────────────────── */

.u-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

.u-mono {
  font-family: var(--font-mono);
}

.u-label {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--text-muted);
}

.u-divider {
  height: 1px;
  background: var(--border-dim);
  margin: var(--space-md) var(--space-md);
}