@font-face {
    font-family: 'Apfel Grotesk';
    src: url('/fonts/ApfelGrotezk-Mittel.woff2') format('woff2'),
         url('/fonts/ApfelGrotezk-Mittel.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

:root {
    /* Pantone 553 C, sampled from the supplied PDF artwork. */
    --mn-green: #274733;
    --mn-green-dark: #1b3123;
    --mn-green-light: #3a6049;
    --mn-green-pale: #edf3ef;
    --mn-font-heading: 'Apfel Grotesk', 'Apfel Grotezk', 'Inter', 'Helvetica Neue', Arial, sans-serif;
    /* Gelica is specified by the guide; Georgia is used until its full webfont is supplied. */
    --mn-font-body: 'Gelica', Georgia, 'Times New Roman', serif;
}

body {
    font-family: var(--mn-font-body);
}

body h1, body h2, body h3, body h4, body h5, body h6,
.mn-heading,
.dashboard-title,
.auth-title {
    font-family: var(--mn-font-heading);
    font-weight: 500;
    letter-spacing: -0.01em;
}

.mn-accent {
    font-family: var(--mn-font-body);
    font-style: italic;
    text-decoration: underline;
    text-decoration-color: var(--mn-green);
    text-decoration-thickness: 0.08em;
    text-underline-offset: 0.12em;
}

.mn-home .mn-hero h1,
.mn-home .mn-hero h1 span {
    color: var(--mn-green-dark) !important;
}

/* The homepage uses Tailwind utilities; keep their greens on the brand palette. */
.bg-green-600,
.bg-green-700,
.hover\:bg-green-700:hover {
    background-color: var(--mn-green) !important;
}

.from-green-900 {
    --tw-gradient-from: var(--mn-green-dark) var(--tw-gradient-from-position) !important;
    --tw-gradient-to: rgb(27 49 35 / 0) var(--tw-gradient-to-position) !important;
}

.to-green-700 {
    --tw-gradient-to: var(--mn-green) var(--tw-gradient-to-position) !important;
}

.text-green-600,
.text-green-700,
.text-green-800,
.hover\:text-green-600:hover {
    color: var(--mn-green) !important;
}

.text-green-100 {
    color: var(--mn-green-pale) !important;
}

.text-green-400 {
    color: var(--mn-green) !important;
}

.bg-gray-900 .text-green-400,
.bg-gray-900 .hover\:text-green-300:hover {
    color: #fff !important;
}

.bg-green-50,
.bg-green-100 {
    background-color: var(--mn-green-pale) !important;
}

.border-green-200,
.border-green-400,
.border-green-500,
.border-green-600 {
    border-color: #c8d7cd !important;
}

.focus\:ring-green-500:focus {
    --tw-ring-color: var(--mn-green) !important;
}

.mn-brand-art-card {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 8rem;
    margin: 0 auto 0.75rem;
    padding: 0.5rem;
    overflow: hidden;
    border-radius: 0.75rem;
    background: var(--mn-green-pale);
}

.mn-brand-art-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}