/*
 * Fonts, variables, resets, and base typography.
 *
 * Change the site font or heading scale here.
 */

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap");

:root {
    --font-ui: "Inter", system-ui, sans-serif;
    --font-head: var(--font-ui);
    --font-base: var(--font-ui);

    --heading-color: var(--deep-pine);
    --heading-letter-spacing: 0;
    --heading-line-height: 1.08;
    --h1-font-size: clamp(2rem, 4vw, 3.5rem);
    --h2-font-size: clamp(1.5rem, 2.6vw, 2.25rem);
    --h3-font-size: 1.25rem;
    --h4-font-size: 1rem;
    --h5-font-size: .875rem;
    --h6-font-size: .75rem;

    --deep-pine: #183028;
    --warm-bg: #FAF9F6;
    --marsh-sage: #6F7F73;
    --atlantic: #3E6B6F;
    --sunset: #C77B49;
    --driftwood: #B8AA96;
    --fog: #DCE1DD;
    --text: #1D1D1B;
    --muted: #6E6A63;
    --border: #E5E1D8;
    --card: #FFFFFF;
    --shadow: 0 22px 70px rgba(24, 48, 40, .14);
    --soft-shadow: 0 10px 30px rgba(24, 48, 40, .09);
    --radius-lg: 28px;
    --radius-md: 18px;
    --radius-sm: 10px;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    background:
        radial-gradient(circle at 20% 0%, rgba(220, 225, 221, .85), transparent 32rem),
        linear-gradient(135deg, rgba(24, 48, 40, .05) 0, transparent 30%),
        var(--warm-bg);
    color: var(--text);
    font-family: var(--font-base);
}

body,
button,
input,
select,
textarea,
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-base);
}

h1,
h2,
h3,
h4,
h5,
h6 {
    margin-block: 0;
    color: var(--heading-color);
    font-weight: 700;
    line-height: var(--heading-line-height);
    letter-spacing: var(--heading-letter-spacing);
}

h1 {
    font-size: var(--h1-font-size) !important;
}

h2 {
    font-size: var(--h2-font-size) !important;
}

h3 {
    font-size: var(--h3-font-size) !important;
}

h4 {
    font-size: var(--h4-font-size) !important;
}

h5 {
    font-size: var(--h5-font-size) !important;
}

h6 {
    font-size: var(--h6-font-size) !important;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    opacity: .42;
    background-image:
        repeating-radial-gradient(ellipse at 78% 20%, transparent 0 18px, rgba(111, 127, 115, .14) 19px 20px),
        repeating-radial-gradient(ellipse at 88% 68%, transparent 0 23px, rgba(199, 123, 73, .09) 24px 25px);
    background-size: 760px 560px, 620px 520px;
}

a {
    color: inherit;
    text-decoration: none;
}

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

svg {
    display: inline-block;
    width: 1em;
    height: 1em;
}

[hidden] {
    display: none !important;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/*
 * Admin Command Center design tokens.
 * Keep shared color, typography, spacing, radius, shadow, and z-index values here.
 */

.admin-page,
.auth-page {
    --admin-font-family: var(--font-base);
    --admin-color-text: var(--text, #1D1D1B);
    --admin-color-muted: var(--muted, #6E6A63);
    --admin-color-surface: rgba(255, 255, 255, .84);
    --admin-color-surface-solid: #FFFFFF;
    --admin-color-surface-subtle: rgba(250, 249, 246, .76);
    --admin-color-border: var(--border, #E5E1D8);
    --admin-color-primary: var(--deep-pine, #183028);
    --admin-color-primary-soft: rgba(226, 239, 230, .88);
    --admin-color-success: #2f7c45;
    --admin-color-warning: #9a6a19;
    --admin-color-danger: #a33b2f;

    --admin-pill-nature-bg: #D8F0D2;
    --admin-pill-nature-text: #1E4F2A;
    --admin-pill-nature-border: #7FBE74;
    --admin-pill-nature-dot: #2F7A3E;
    --admin-pill-water-bg: #D6F1F4;
    --admin-pill-water-text: #155860;
    --admin-pill-water-border: #74C2CB;
    --admin-pill-water-dot: #168A99;
    --admin-pill-activity-bg: #FFF0B8;
    --admin-pill-activity-text: #624800;
    --admin-pill-activity-border: #D7B93E;
    --admin-pill-activity-dot: #B88A00;
    --admin-pill-landmark-bg: #FFE1B8;
    --admin-pill-landmark-text: #713800;
    --admin-pill-landmark-border: #D99A44;
    --admin-pill-landmark-dot: #C77B49;
    --admin-pill-facility-bg: #E4EFED;
    --admin-pill-facility-text: #294F50;
    --admin-pill-facility-border: #9AB8B4;
    --admin-pill-facility-dot: var(--atlantic);
    --admin-pill-review-bg: #DDEBFF;
    --admin-pill-review-text: #254B7A;
    --admin-pill-review-border: #8CB0E8;
    --admin-pill-review-dot: #2F6FAE;
    --admin-pill-alert-bg: #FFE0D1;
    --admin-pill-alert-text: #843814;
    --admin-pill-alert-border: #E29A6D;
    --admin-pill-alert-dot: #C76028;
    --admin-pill-closed-bg: #F6D1CC;
    --admin-pill-closed-text: #84251D;
    --admin-pill-closed-border: #D96A60;
    --admin-pill-closed-dot: #AD3B31;
    --admin-pill-neutral-bg: #EFE5D4;
    --admin-pill-neutral-text: #514130;
    --admin-pill-neutral-border: #D3BFA0;
    --admin-pill-neutral-dot: #9A8468;

    --admin-font-size-xs: .72rem;
    --admin-font-size-sm: .78rem;
    --admin-font-size-md: .88rem;
    --admin-font-size-lg: 1rem;
    --admin-font-size-xl: 1.125rem;
    --admin-font-size-page-title: var(--h1-font-size);

    --admin-line-tight: 1.2;
    --admin-line-normal: 1.45;
    --admin-line-relaxed: 1.6;

    --admin-weight-normal: 400;
    --admin-weight-medium: 600;
    --admin-weight-bold: 700;
    --admin-weight-heavy: 850;

    --admin-space-1: 4px;
    --admin-space-2: 8px;
    --admin-space-3: 12px;
    --admin-space-4: 16px;
    --admin-space-5: 20px;
    --admin-space-6: 24px;
    --admin-space-8: 32px;

    --admin-radius-sm: 6px;
    --admin-radius-md: 8px;
    --admin-radius-lg: 12px;

    --admin-shadow-card: 0 10px 28px rgba(24, 48, 40, .06);
    --admin-shadow-menu: 0 18px 34px rgba(24, 48, 40, .14);
}

/*
 * Admin reset and containment.
 * These rules protect the command center from public-site defaults while staying low-specificity.
 */

.admin-page,
.auth-page {
    max-width: 100%;
    overflow-x: clip;
    font-family: var(--font-base);
    font-size: 14px;
    line-height: var(--admin-line-normal);
    color: var(--admin-color-text);
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

.admin-page *,
.admin-page *::before,
.admin-page *::after,
.auth-page *,
.auth-page *::before,
.auth-page *::after {
    box-sizing: border-box;
}

.admin-page input,
.admin-page textarea,
.admin-page select,
.admin-page button {
    font: inherit;
    font-size: 16px;
}

.admin-page a {
    color: inherit;
    text-decoration: none;
}

.admin-page svg {
    display: inline-block;
    width: 1em;
    height: 1em;
}

/*
 * Admin typography scale.
 * Headings are for document structure. Labels and metadata should use field/utility classes.
 */

.admin-page h1,
.admin-page h2,
.admin-page h3,
.admin-page h4,
.admin-page h5 {
    margin: 0;
    color: var(--heading-color);
    letter-spacing: var(--heading-letter-spacing);
}

.admin-page h1,
.admin-page-title {
    font-size: var(--h1-font-size) !important;
    font-weight: var(--admin-weight-bold);
    line-height: var(--heading-line-height);
}

.admin-page h2,
.admin-panel-title {
    font-size: var(--h2-font-size) !important;
    font-weight: var(--admin-weight-bold);
    line-height: var(--heading-line-height);
}

.admin-page h3,
.admin-section-heading {
    font-size: var(--h3-font-size) !important;
    font-weight: var(--admin-weight-bold);
    line-height: var(--heading-line-height);
}

.admin-page h4 {
    font-size: var(--h4-font-size) !important;
    font-weight: var(--admin-weight-bold);
    line-height: var(--heading-line-height);
}

.admin-page h5 {
    font-size: var(--h5-font-size) !important;
    font-weight: var(--admin-weight-bold);
    line-height: var(--heading-line-height);
}

.admin-page p,
.admin-page-subtitle {
    margin: 0;
    color: var(--admin-color-muted);
    font-size: var(--admin-font-size-md);
    line-height: var(--admin-line-relaxed);
    letter-spacing: 0;
}

.admin-field-label {
    display: block;
    margin: 0 0 var(--admin-space-1);
    color: var(--admin-color-muted);
    font-size: .78rem;
    font-weight: 750;
    line-height: 1.25;
}

.admin-field-value {
    display: block;
    margin: 0;
    color: var(--admin-color-text);
    font-size: var(--admin-font-size-sm);
    font-weight: var(--admin-weight-bold);
    line-height: 1.45;
}

.admin-field-help {
    display: block;
    margin-top: var(--admin-space-1);
    color: var(--admin-color-muted);
    font-size: var(--admin-font-size-xs);
    line-height: 1.4;
}

.admin-editor-kicker {
    color: var(--admin-color-primary);
    font-size: var(--admin-font-size-xs);
    font-weight: var(--admin-weight-bold);
    letter-spacing: 0;
}

.admin-editor-title {
    font-size: var(--admin-font-size-page-title);
    font-weight: var(--admin-weight-bold);
    line-height: var(--admin-line-tight);
}

.admin-editor-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--admin-space-2) var(--admin-space-3);
    color: var(--admin-color-muted);
    font-size: var(--admin-font-size-sm);
    line-height: var(--admin-line-relaxed);
}

.admin-card-title,
.admin-sidebar-card-title {
    margin: 0;
    color: var(--admin-color-text);
    font-size: var(--admin-font-size-xl);
    font-weight: var(--admin-weight-bold);
    line-height: var(--admin-line-tight);
}

.admin-card-description {
    margin: var(--admin-space-1) 0 0;
    color: var(--admin-color-muted);
    font-size: var(--admin-font-size-sm);
    line-height: var(--admin-line-relaxed);
}