@import url("https://fonts.googleapis.com/css2?family=Oswald:wght@400;500;700&family=Roboto:wght@400;500&family=Bebas+Neue&display=swap");

/* ----------------------------------------------------------
   CSS Custom Properties
   ---------------------------------------------------------- */
:root {
  --torn-polygon: polygon(0% 2%, 2% 0%, 5% 1%, 10% 0%, 15% 2%, 20% 0%, 25% 1%, 30% 0%, 35% 2%, 40% 0%, 45% 1%, 50% 0%, 55% 2%, 60% 0%, 65% 1%, 70% 0%, 75% 2%, 80% 0%, 85% 1%, 90% 0%, 95% 2%, 100% 0%, 100% 5%, 98% 10%, 100% 15%, 99% 20%, 100% 25%, 98% 30%, 100% 35%, 99% 40%, 100% 45%, 98% 50%, 100% 55%, 99% 60%, 100% 65%, 98% 70%, 100% 75%, 99% 80%, 100% 85%, 98% 90%, 100% 95%, 100% 100%, 95% 98%, 90% 100%, 85% 99%, 80% 100%, 75% 98%, 70% 100%, 65% 99%, 60% 100%, 55% 98%, 50% 100%, 45% 99%, 40% 100%, 35% 98%, 30% 100%, 25% 99%, 20% 100%, 15% 98%, 10% 100%, 5% 99%, 0% 100%, 0% 95%, 2% 90%, 0% 85%, 1% 80%, 0% 75%, 2% 70%, 0% 65%, 1% 60%, 0% 55%, 2% 50%, 0% 45%, 1% 40%, 0% 35%, 2% 30%, 0% 25%, 1% 20%, 0% 15%, 2% 10%, 0% 5%);
}

/* ----------------------------------------------------------
   Base
   ---------------------------------------------------------- */
body {
  font-family: "Roboto", sans-serif;
  background-color: #0b1326;
  color: #e0e0e0;
}

h1, h2, h3, .font-heading {
  font-family: "Bebas Neue", "Oswald", sans-serif;
  letter-spacing: 0.05em;
}

/* ----------------------------------------------------------
   Torn-edge components (DRY — single source of truth)
   ---------------------------------------------------------- */
.torn-edge {
  clip-path: var(--torn-polygon);
}

.torn-white-frame {
  /* Near-white surface — no pure #ffffff per DESIGN.md */
  background-color: #eef0f8;
  padding: 8px;
  clip-path: var(--torn-polygon);
}

.inner-content-clip {
  clip-path: var(--torn-polygon);
  height: 100%;
  width: 100%;
}

/* ----------------------------------------------------------
   Paper texture
   ---------------------------------------------------------- */
.paper-texture {
  background-color: #e5e5e5;
  background-image: url('../img/paper-texture.png');
  background-repeat: repeat;
  color: #1a1a1a;
}