@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=DM+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;1,100;1,200;1,300&family=Space+Mono:wght@400;700&display=swap');

:root {
  --paper:      #f2efe6;
  --teal:       #3a7a8a;
  --teal-dark:  #1e4a55;
  --teal-pale:  #c8dce4;
  --red:        #d94535;
  --ink:        #0f0f0c;
  --grey:       #8a8a7c;
  --olive:      #7a8a3a;
  --olive-pale: rgba(122,138,58,0.12);
  --white:      #f8f5ee;

  /* backward-compat aliases */
  --cream:      var(--paper);
  --rust:       var(--teal);
  --rust-light: var(--teal);
  --sage:       var(--olive);
  --sage-light: var(--olive);
  --muted:      var(--grey);
  --border:     rgba(15,15,12,0.10);
  --warm:       var(--paper);
  --gold:       var(--olive);
  --card-bg:    var(--white);
}

body {
  font-family: 'DM Sans', sans-serif;
  font-weight: 300;
  background: var(--paper);
  color: var(--ink);
  position: relative;
}

/* Real paper texture — scanned grain + wrinkles, fixed overlay */
body::before {
  display: block !important;
  content: '';
  position: absolute;
  top: -4%;
  left: -4%;
  width: 108%;
  height: 108%;
  background-image: url('../img/paper-texture-web.jpg');
  background-size: 100% 100%;
  opacity: 0.82;
  pointer-events: none;
  z-index: 9998;
  mix-blend-mode: multiply;
}

/* Hide grain on dark EPK themes so it doesn't muddy dark backgrounds */
body[data-epk-theme="bold"]::before,
body[data-epk-theme="vibrant"]::before,
body[data-epk-theme="static"]::before { display: none !important; }

/* No rounded corners anywhere */
*, *::before, *::after { border-radius: 0 !important; }

/* Remove offset box-shadows globally */
* { box-shadow: none !important; }

/* ── Global micro-animations ── */
a, button { transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease, transform 0.18s ease, opacity 0.2s ease; }

/* ── Avatar circle exceptions (override global border-radius: 0) ── */
.nav-avatar,
.nav-avatar-init,
.reviewer-avatar,
.ri-avatar,
.ri-avatar-img,
.profile-photo,
.profile-photo-init,
.profile-photo-wrap,
.comm-avatar,
.comm-avatar-init,
.comm-avatar-initials,
.comm-confirmed-avatar,
.comm-confirmed-avatar-init,
.cp-av,
img[class*="avatar"],
img[class*="photo"] {
  border-radius: 50% !important;
}

/* Cover images that contain "photo" in class but must stay square */
img.comm-card-photo-img { border-radius: 0 !important; }