/* ═══════════════════════════════════════════
   DESIGN TOKENS
═══════════════════════════════════════════ */
:root {
  --bg:         #f2ede4;
  --surface:    #ffffff;
  --surface-lo: #faf8f4;
  --surface-hi: #f7f3ec;

  --nav-bg:      #12223a;
  --nav-mid:     #18304f;
  --nav-border:  #1e3a5a;
  --nav-text:    #8ba5bf;
  --nav-text-hi: #cddcec;
  --nav-active:  rgba(183,150,93,0.14);

  --border:    #e0d8cc;
  --border-lo: #ede8e0;

  --text-1: #1c2e42;
  --text-2: #5a6e82;
  --text-3: #9aabb8;

  --brass:      #b8924a;
  --brass-hi:   #d4aa66;
  --brass-lo:   #8a6e3a;
  --brass-soft: rgba(184,146,74,0.10);
  --brass-pill: rgba(184,146,74,0.14);

  /* Stage palette */
  --s-new:       #64748b;
  --s-visit:     #3478c8;
  --s-estimate:  #0ea5e9;
  --s-sold:      #16a34a;
  --s-preprod:   #d97706;
  --s-scheduled: #ea580c;
  --s-inprog:    #b8924a;
  --s-punch:     #ca8a04;
  --s-complete:  #15803d;
  --s-lost:      #dc2626;
  --s-cancelled: #94a3b8;

  --font-display: 'Playfair Display', Georgia, serif;
  --font-ui:      'Outfit', system-ui, sans-serif;
  --font-mono:    'IBM Plex Mono', 'Courier New', monospace;

  --sidebar-w: 248px;
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
}

/* ═══════════════════════════════════════════
   RESET
═══════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
button, input, select, textarea { font: inherit; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }

body {
  font-family: var(--font-ui);
  background: var(--bg);
  color: var(--text-1);
  display: flex;
  min-height: 100vh;
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* ═══════════════════════════════════════════
   SCROLLBAR & ANIMATIONS
═══════════════════════════════════════════ */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }

@keyframes risein {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ═══════════════════════════════════════════
   AUTH LAYOUT
═══════════════════════════════════════════ */
.auth-main {
  display: flex; align-items: center; justify-content: center;
  min-height: 100vh; background: var(--bg); width: 100%;
}
.auth-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: 40px; width: 100%; max-width: 420px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.08);
}
.auth-logo { text-align: center; margin-bottom: 28px; }
.auth-logo-mark { width: 48px; height: 48px; background: linear-gradient(135deg, var(--brass-lo), var(--brass)); border-radius: var(--r-md); display: flex; align-items: center; justify-content: center; margin: 0 auto 10px; box-shadow: 0 2px 10px rgba(184,146,74,0.3); }
.auth-logo-mark svg { width: 26px; height: 26px; fill: #fff; }
.auth-logo-name { font-family: var(--font-display); font-size: 22px; font-weight: 700; color: var(--text-1); }
.auth-logo-sub  { font-family: var(--font-mono); font-size: 10px; color: var(--text-3); letter-spacing: 0.14em; text-transform: uppercase; margin-top: 3px; }
.auth-title { font-family: var(--font-display); font-size: 18px; font-weight: 600; color: var(--text-1); margin-bottom: 20px; }
.auth-body { display: block; }