@import url('/fonts.css');

:root {
  --sb-ink: #12161c;
  --sb-paper: #f4f0e8;
  --sb-muted: #9aa3ad;
  --sb-amber: #e8a84a;
  --sb-amber-deep: #c9842a;
  --sb-line: rgba(244, 240, 232, 0.12);
  --sb-card: rgba(26, 33, 43, 0.78);
}

html, body {
  font-family: "Outfit", "Segoe UI", system-ui, sans-serif !important;
  background: var(--sb-ink) !important;
  color: var(--sb-paper) !important;
  min-height: 100%;
}

body {
  background:
    radial-gradient(1200px 600px at 12% -10%, rgba(232, 168, 74, 0.18), transparent 55%),
    radial-gradient(900px 500px at 100% 0%, rgba(74, 140, 140, 0.14), transparent 50%),
    linear-gradient(165deg, #0e1217 0%, #171d26 45%, #12161c 100%) !important;
  background-attachment: fixed !important;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0.04;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  z-index: 0;
}

#root, #root > * { position: relative; z-index: 1; }

.MuiPaper-root, [class*="MuiPaper"] {
  background: var(--sb-card) !important;
  backdrop-filter: blur(16px) saturate(1.2) !important;
  border: 1px solid var(--sb-line) !important;
  border-radius: 20px !important;
  box-shadow: 0 24px 60px rgba(0,0,0,0.45) !important;
}

.MuiTypography-h1, .MuiTypography-h2, .MuiTypography-h3, .MuiTypography-h4, h1, h2, h3 {
  font-family: "Fraunces", Georgia, serif !important;
  letter-spacing: -0.02em !important;
  color: var(--sb-paper) !important;
}

.MuiButton-containedPrimary, button[type="submit"], .MuiButton-root.MuiButton-contained {
  background: linear-gradient(135deg, var(--sb-amber) 0%, var(--sb-amber-deep) 100%) !important;
  color: #1a1208 !important;
  font-weight: 600 !important;
  border-radius: 12px !important;
  text-transform: none !important;
  box-shadow: 0 10px 24px rgba(232, 168, 74, 0.28) !important;
}

.MuiOutlinedInput-notchedOutline { border-color: var(--sb-line) !important; }
.MuiInputBase-input { color: var(--sb-paper) !important; }
.MuiInputBase-root, .MuiOutlinedInput-root { border-radius: 12px !important; }
a { color: var(--sb-amber) !important; }
img[alt*="Logo"], img[src*="logo"] { max-height: 64px !important; width: auto !important; }