/* Eri Tech — extraído na Fase 1. Não inclua segredos em CSS/JS do frontend. */
html.day {
  --ink:     #F5F5F7;
  --ink-2:   #FFFFFF;
  --ink-3:   #F0F0F4;
  --ink-4:   #E8E8EE;
  --ink-5:   #DDDDE6;
  --ink-6:   #D0D0DC;
  --wire:    rgba(0,0,0,0.07);
  --wire-2:  rgba(0,0,0,0.11);
  --wire-3:  rgba(0,0,0,0.18);
  --chalk:   #09090B;
  --chalk-2: #3A3A48;
  --chalk-3: #7A7A8A;
  --chalk-4: #B8B8C8;
  --amber:      #B87810;
  --amber-dim:  rgba(184,120,16,0.10);
  --amber-wire: rgba(184,120,16,0.26);
  --amber-glow: rgba(184,120,16,0.05);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Outfit', system-ui, sans-serif;
  background: var(--ink);
  color: var(--chalk-2);
  min-height: 100vh;
  display: flex;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  transition: background var(--mid), color var(--mid);
}
::-webkit-scrollbar { width: 2px; height: 2px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--ink-6); border-radius: 99px; }

/* ── TYPE HELPERS ── */
.mono { font-family: 'DM Mono', monospace; }
.display { font-family: 'Outfit', sans-serif; }

/* ── UTILITY ── */
.hidden { display: none !important; }

/* ══════════════════════════════════════════
   RAIL (sidebar)
══════════════════════════════════════════ */
#rail {
  width: var(--rail);
  min-width: var(--rail);
  height: 100vh;
  position: sticky;
  top: 0;
  background: var(--ink-2);
  border-right: 1px solid var(--wire);
  display: flex;
  flex-direction: column;
  z-index: 40;
  overflow: hidden;
  transition: transform var(--slow) var(--ease),
              background var(--mid), border-color var(--mid);
}
body.focus #rail { transform: translateX(-100%); }

.rail-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow-y: auto;
  overflow-x: hidden;
}