/* clawborrator — shared auth-page styling
   "Late-night ops, lit by tungsten." See design/THEME-PREVIEW.html for the
   full system. This file is the runtime distillation: ink palette + amber +
   Fraunces / Mona Sans / JetBrains Mono.
*/

:root {
  --ink-0: #08090c;
  --ink-1: #0c0f15;
  --ink-2: #12161e;
  --ink-3: #171c26;

  --line-faint: rgba(255, 252, 242, 0.05);
  --line:       rgba(255, 252, 242, 0.09);
  --line-bold:  rgba(255, 252, 242, 0.18);

  --paper:    #efeae0;
  --paper-2:  #cdc7ba;
  --mute:     #888578;
  --mute-2:   #57554c;

  --amber:      #d97339;
  --amber-2:    #f08e51;
  --amber-glow: rgba(217, 115, 57, 0.16);
  --amber-wash: rgba(217, 115, 57, 0.06);
  --amber-line: rgba(217, 115, 57, 0.34);

  --serif: 'Fraunces', 'Iowan Old Style', Georgia, serif;
  --sans:  'Mona Sans', -apple-system, system-ui, 'Segoe UI', sans-serif;
  --mono:  'JetBrains Mono', ui-monospace, 'SFMono-Regular', Consolas, monospace;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { background: var(--ink-0); color-scheme: dark; }

body {
  font-family: var(--sans);
  font-feature-settings: 'ss01', 'ss02', 'cv11';
  background: var(--ink-0);
  color: var(--paper);
  font-size: 15px;
  line-height: 1.55;
  letter-spacing: -0.005em;
  min-height: 100vh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* atmosphere */
body::before {
  content: '';
  position: fixed; inset: 0;
  pointer-events: none; z-index: 1;
  background:
    radial-gradient(1100px 520px at 50% -10%, rgba(217, 115, 57, 0.07), transparent 60%),
    radial-gradient(700px 500px at 100% 100%, rgba(108, 200, 164, 0.025), transparent 60%);
}
/* film grain */
body::after {
  content: '';
  position: fixed; inset: 0;
  pointer-events: none; z-index: 2;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 0.95  0 0 0 0 0.85  0 0 0 0.04 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  opacity: 0.5;
  mix-blend-mode: overlay;
}

main { position: relative; z-index: 3; }

::selection { background: var(--amber-wash); color: var(--amber-2); }

/* ─── Topbar ──────────────────────────────────────────────────────── */

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 40px;
  border-bottom: 1px solid var(--line-faint);
}
.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--paper);
  text-decoration: none;
}
.brand-mark {
  width: 28px; height: 14px;
  color: var(--amber);
  filter: drop-shadow(0 0 12px var(--amber-glow));
}
.brand-name {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: 17px;
  letter-spacing: 0.005em;
}
.topbar-meta {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--mute);
  text-transform: uppercase;
  letter-spacing: 0.16em;
}

.wrap { max-width: 1180px; margin: 0 auto; padding: 0 40px; }

/* ─── Buttons ─────────────────────────────────────────────────────── */

.btn {
  appearance: none;
  border: 1px solid var(--line-bold);
  background: transparent;
  color: var(--paper);
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 500;
  padding: 11px 20px;
  border-radius: 8px;
  cursor: pointer;
  letter-spacing: -0.005em;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transition: background 160ms ease, border-color 160ms ease, color 160ms ease, transform 160ms ease;
  text-decoration: none;
}
.btn:hover { background: rgba(255,252,242,0.04); border-color: var(--paper-2); }
.btn:active { transform: translateY(1px); }
.btn--primary {
  background: var(--amber);
  color: #1a0d05;
  border-color: var(--amber);
  font-weight: 600;
  box-shadow: 0 12px 32px -16px var(--amber-glow);
}
.btn--primary:hover { background: var(--amber-2); border-color: var(--amber-2); }
.btn--ghost { border-color: var(--line); color: var(--paper-2); }

/* ─── Status pulse ────────────────────────────────────────────────── */

.dot {
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 99px;
  background: var(--amber);
  box-shadow: 0 0 10px var(--amber-glow);
  margin-right: 8px;
  transform: translateY(-1px);
}

/* ─── Avatar ──────────────────────────────────────────────────────── */

.avatar {
  width: 56px; height: 56px;
  border-radius: 99px;
  border: 1px solid var(--amber-line);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--mono);
  font-size: 22px;
  font-weight: 600;
  text-transform: uppercase;
  background: var(--ink-2);
  color: var(--amber-2);
  overflow: hidden;
  box-shadow: 0 0 0 6px rgba(217,115,57,0.05);
}
.avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ─── Reveal ──────────────────────────────────────────────────────── */

.reveal {
  opacity: 0;
  transform: translateY(14px);
  animation: reveal 800ms cubic-bezier(.23,.86,.39,.96) 80ms forwards;
}
@keyframes reveal {
  to { opacity: 1; transform: translateY(0); }
}