/* ===========================================================================
    Paperplay – global styles  (static/css/styles.css)
    • Loaded once from <link rel="stylesheet" …>
    • Everything else (Tailwind, component CSS, etc.) sits in your bundle
   =========================================================================== */

/* ---------- 1. Josh Comeau–style reset (tiny + covers the weird stuff) ---- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html, body { height: 100%; scroll-behavior: smooth; }
body {
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
img, picture, svg, video, canvas { display: block; max-width: 100%; }
input, button, textarea, select { font: inherit; }
p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }

/* ---------- 2. Design tokens (adjust to taste) --------------------------- */
:root {
  /* brand */
  --pp-indigo-600: #4f46e5;
  --pp-indigo-700: #4338ca;
  --pp-indigo-50 : #eef2ff;

  /* neutrals */
  --pp-gray-900: #111827;
  --pp-gray-700: #374151;
  --pp-gray-100: #f3f4f6;
  --pp-white   : #ffffff;

  /* typography */
  --font-heading: "League Spartan", sans-serif;
  --font-body   : "Outfit", sans-serif;

  /* sizing */
  --site-max-w : 72rem;      /* 1152 px */
  --gutter     : 1rem;       /* 16 px  */
  --radius     : .5rem;      /* 8 px   */
  --shadow     : 0 6px 15px rgba(0,0,0,.06);
}

/* ---------- 3. Base typography ------------------------------------------ */
body {
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--pp-gray-900);
  background-color: var(--pp-white);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  color: var(--pp-gray-900);
  font-weight: 700;
}

h1 { font-size: clamp(2.5rem, 6vw, 3.5rem); }
h2 { font-size: clamp(1.8rem, 5vw, 2.5rem); }
h3 { font-size: 1.5rem; }

/* ---------- 4. Simple layout helpers ------------------------------------ */
.container {
  width: min(100% - calc(var(--gutter) * 2), var(--site-max-w));
  margin-inline: auto;
}

.flex-center { display: flex; justify-content: center; align-items: center; }
.grid-gap     { display: grid; gap: var(--gutter); }

/* ---------- 5. Buttons & links ------------------------------------------ */
a {
  color: var(--pp-indigo-600);
  text-decoration: none;
  transition: color .15s ease;
}
a:hover { color: var(--pp-indigo-700); }

.btn {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .65rem 1.25rem;
  border-radius: var(--radius);
  background: var(--pp-indigo-600);
  color: var(--pp-white);
  font-weight: 600;
  cursor: pointer;
  border: none;
  transition: background .15s ease;
}
.btn:hover   { background: var(--pp-indigo-700); }
.btn:disabled {
  opacity: .6;
  cursor: not-allowed;
}

/* ---------- 6. Utility classes (sprinkle where needed) ------------------ */
.text-center { text-align: center; }
.mt-1 { margin-top: .25rem; }  .mb-1 { margin-bottom: .25rem; }
.mt-2 { margin-top: .5rem;  }  .mb-2 { margin-bottom: .5rem; }
.mt-4 { margin-top: 1rem;  }   .mb-4 { margin-bottom: 1rem; }