@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,500;12..96,700;12..96,800&family=DM+Sans:wght@400;500;600;700&family=DM+Mono:wght@400;500&display=swap');

:root {
  --color-cream: #f9fafb;
  --color-paper: #fffdf7;
  --color-ink: #14241a;
  --color-leaf: #1f7a3d;
  --color-leaf-dark: #0f4d24;
  --color-leaf-soft: #e3f1e5;
  --color-ember: #f08a24;
  --color-ember-soft: #fdebd3;
  --color-rule: #d9ded6;
  --color-mute: #5c6b60;
  --color-berry: #c23b32;
}

html, body {
  background: #f6f5ee;
  color: #14241a;
  font-family: 'DM Sans', sans-serif;
  -webkit-font-smoothing: antialiased;
}

::selection {
  background: #f08a24;
  color: #14241a;
}

* {
  scrollbar-width: none;
}
*::-webkit-scrollbar {
  display: none;
}

h1, h2, h3, .font-display {
  font-family: 'Bricolage Grotesque', sans-serif;
  letter-spacing: -0.02em;
}

button, input, select, textarea {
  font-family: inherit;
}

:focus-visible {
  outline: 2px solid #1f7a3d;
  outline-offset: 2px;
}

@keyframes fillbar {
  from { width: 0; }
  to { width: 100%; }
}

@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.rise {
  animation: rise 0.45s ease both;
}

/* Modal styling */
.modal-backdrop {
  backdrop-filter: blur(4px);
}

/* Print styling */
@media print {
  .no-print {
    display: none !important;
  }
  body {
    background: white !important;
    color: black !important;
  }
  .print-only {
    display: block !important;
  }
}