/* ════════════════════════════════════════
   BASE.CSS — Reset · Variables · Typography
   Resource Atlas | DYFTZ
════════════════════════════════════════ */

/* ── CSS Custom Properties ── */
:root {
  /* Brand Colors */
  --gold:         #f59e0b;
  --gold-light:   #fcd34d;
  --gold-dim:     rgba(245,158,11,.16);
  --purple:       #a78bfa;
  --purple-light: #c4b5fd;
  --purple-dim:   rgba(167,139,250,.16);
  --green:        #22c55e;
  --green-light:  #86efac;
  --green-dim:    rgba(34,197,94,.15);
  --red:          #ef4444;
  --red-light:    #fca5a5;
  --red-dim:      rgba(239,68,68,.15);
  --blue:         #60a5fa;
  --blue-light:   #bfdbfe;
  --blue-dim:     rgba(96,165,250,.15);
  --pink:         #f472b6;
  --orange:       #fb923c;

  /* Surfaces */
  --bg-base:      #080d1a;
  --bg-panel:     #070c1a;
  --bg-sidebar:   #070c1a;
  --bg-card:      rgba(255,255,255,.04);
  --bg-input:     rgba(255,255,255,.05);
  --bg-hover:     rgba(255,255,255,.03);

  /* Borders */
  --border:       rgba(255,255,255,.10);
  --border-light: rgba(255,255,255,.18);
  --border-heavy: rgba(255,255,255,.25);

  /* Text */
  --text-primary:   rgba(255,255,255,.92);
  --text-secondary: rgba(255,255,255,.60);
  --text-muted:     rgba(255,255,255,.35);
  --text-faint:     rgba(255,255,255,.20);

  /* Spacing */
  --radius-sm: 5px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;

  /* Shadows */
  --shadow-modal: 0 24px 64px rgba(0,0,0,.75);
  --shadow-card:  0 4px 16px rgba(0,0,0,.4);
}

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; overflow: hidden; }
body {
  background: var(--bg-base);
  color: var(--text-primary);
  font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Microsoft YaHei', 'Segoe UI', sans-serif;
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
button { font-family: inherit; }
a { color: var(--gold); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ── Scrollbars ── */
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,.15); border-radius: 2px; }

/* ── Utility ── */
.u-text-gold     { color: var(--gold); }
.u-text-purple   { color: var(--purple); }
.u-text-muted    { color: var(--text-muted); }
.u-text-center   { text-align: center; }
.u-flex          { display: flex; }
.u-flex-col      { display: flex; flex-direction: column; }
.u-items-center  { align-items: center; }
.u-justify-between { justify-content: space-between; }
.u-gap-sm        { gap: 6px; }
.u-gap-md        { gap: 10px; }
.u-gap-lg        { gap: 14px; }
.u-mt-auto       { margin-top: auto; }
.u-mb-sm         { margin-bottom: 8px; }
.u-mb-md         { margin-bottom: 14px; }
.u-full-width    { width: 100%; }
.u-truncate      { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.u-mono          { font-family: 'SF Mono', 'Consolas', monospace; }