/* ── RosettaMaps Design Tokens v2 — Bolder, more confident ─────────────── */

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

:root {
    /* Color — same family, used with more confidence */
    --rm-forest:      #142019;
    --rm-forest-soft: #1f3327;
    --rm-parchment:   #f8f4ea;
    --rm-parchment-deep: #f0ead9;
    --rm-moss:        #3d6b4f;
    --rm-moss-dark:   #25462f;
    --rm-moss-bright: #4f8a64;
    --rm-clay:        #c9763a;
    --rm-clay-dark:   #9c5621;
    --rm-fog:         #6b7a72;
    --rm-fog-light:   #e2ddd0;
    --rm-dusk:        #2c5f7c;
    --rm-white:       #ffffff;
    --rm-danger:      #a13f2f;
    --rm-warn-bg:     #fdf3e3;
    --rm-warn-border: #e3b876;

    /* Type */
    --rm-font-display: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; /* was Fraunces - retired sitewide per explicit direction, see project notes */
    --rm-font-body:    'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --rm-font-mono:    'JetBrains Mono', monospace;

    /* Spacing scale */
    --rm-space-1: 4px;
    --rm-space-2: 8px;
    --rm-space-3: 12px;
    --rm-space-4: 16px;
    --rm-space-5: 24px;
    --rm-space-6: 32px;
    --rm-space-7: 48px;
    --rm-space-8: 64px;
    --rm-space-9: 96px;

    --rm-radius-sm: 10px;
    --rm-radius-md: 16px;
    --rm-radius-lg: 24px;
    --rm-radius-full: 999px;

    /* Layered elevation — depth, not flat borders. Old names kept so every
       existing var(--rm-shadow-sm) reference across the codebase still works. */
    --rm-shadow-sm: 0 1px 2px rgba(20, 32, 25, 0.06), 0 1px 1px rgba(20, 32, 25, 0.04);
    --rm-shadow-md: 0 2px 8px rgba(20, 32, 25, 0.08), 0 4px 4px rgba(20, 32, 25, 0.04);
    --rm-shadow-lg: 0 8px 24px rgba(20, 32, 25, 0.12), 0 2px 8px rgba(20, 32, 25, 0.06);
    --rm-shadow-xl: 0 20px 50px rgba(20, 32, 25, 0.18), 0 6px 16px rgba(20, 32, 25, 0.08);

    --rm-transition: 200ms cubic-bezier(0.16, 1, 0.3, 1);
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    font-family: var(--rm-font-body);
    color: var(--rm-forest);
    background: var(--rm-parchment);
    font-size: 16px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
    font-family: var(--rm-font-display);
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -0.01em;
    margin: 0 0 var(--rm-space-3);
    color: var(--rm-forest);
}

h1 { font-size: 3rem; font-weight: 700; font-optical-sizing: auto; }
h2 { font-size: 2rem; font-weight: 650; }
h3 { font-size: 1.3rem; }

p { margin: 0 0 var(--rm-space-3); }

a { color: var(--rm-dusk); text-decoration: none; transition: color var(--rm-transition); }
a:hover { text-decoration: underline; }

.rm-mono { font-family: var(--rm-font-mono); font-size: 0.85em; letter-spacing: -0.01em; }

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

/* Focus visibility — accessibility floor */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible {
    outline: 2px solid var(--rm-dusk);
    outline-offset: 2px;
    border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ── Topographic contour texture (used on auth/empty states) ───────────── */
.rm-topo-bg {
    background-color: var(--rm-parchment);
    background-image:
        repeating-radial-gradient(circle at 20% 30%, transparent 0, transparent 38px, rgba(20,32,25,0.045) 39px, rgba(20,32,25,0.045) 40px, transparent 41px, transparent 78px),
        repeating-radial-gradient(circle at 80% 70%, transparent 0, transparent 52px, rgba(20,32,25,0.04) 53px, rgba(20,32,25,0.04) 54px, transparent 55px, transparent 106px);
}

/* ── Buttons — bolder, with real lift on hover ──────────────────────────── */
.rm-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--rm-space-2);
    font-family: var(--rm-font-body);
    font-weight: 600;
    font-size: 0.92rem;
    padding: 11px 20px;
    border-radius: var(--rm-radius-sm);
    border: 1.5px solid transparent;
    cursor: pointer;
    transition: transform var(--rm-transition), box-shadow var(--rm-transition), background var(--rm-transition);
    white-space: nowrap;
    text-decoration: none;
    line-height: 1;
}
.rm-btn:active { transform: scale(0.97); }

.rm-btn--primary { background: var(--rm-moss); color: var(--rm-white); box-shadow: var(--rm-shadow-md); }
.rm-btn--primary:hover { background: var(--rm-moss-dark); box-shadow: var(--rm-shadow-lg); transform: translateY(-1px); }

.rm-btn--clay { background: var(--rm-clay); color: var(--rm-white); box-shadow: var(--rm-shadow-md); }
.rm-btn--clay:hover { background: var(--rm-clay-dark); box-shadow: var(--rm-shadow-lg); transform: translateY(-1px); }

.rm-btn--ghost { background: var(--rm-white); color: var(--rm-forest); border-color: var(--rm-fog-light); }
.rm-btn--ghost:hover { background: var(--rm-parchment-deep); border-color: var(--rm-fog); }

.rm-btn--danger { background: transparent; color: var(--rm-danger); border-color: var(--rm-danger); }
.rm-btn--danger:hover { background: var(--rm-danger); color: var(--rm-white); }

.rm-btn--sm { padding: 7px 14px; font-size: 0.82rem; }
.rm-btn--block { width: 100%; justify-content: center; }
.rm-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none !important; }

/* ── Form fields ─────────────────────────────────────────────────────────── */
.rm-field { margin-bottom: var(--rm-space-4); }
.rm-field label {
    display: block;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--rm-fog);
    margin-bottom: var(--rm-space-2);
}
.rm-field input, .rm-field select, .rm-field textarea {
    width: 100%;
    padding: 12px 16px;
    border: 1.5px solid var(--rm-fog-light);
    border-radius: var(--rm-radius-sm);
    background: var(--rm-white);
    font-size: 0.95rem;
    color: var(--rm-forest);
    transition: border-color var(--rm-transition), box-shadow var(--rm-transition);
}
.rm-field input:focus, .rm-field select:focus, .rm-field textarea:focus {
    border-color: var(--rm-moss);
    outline: none;
    box-shadow: 0 0 0 4px rgba(61, 107, 79, 0.14);
}
.rm-field textarea { resize: vertical; min-height: 90px; }
.rm-field-hint { font-size: 0.78rem; color: var(--rm-fog); margin-top: var(--rm-space-1); }
.rm-field-error { font-size: 0.8rem; color: var(--rm-danger); margin-top: var(--rm-space-1); }
.rm-password-wrapper { position: relative; }
.rm-password-wrapper input { padding-right: 44px; }
.rm-password-toggle {
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    padding: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--rm-fog);
    cursor: pointer;
    border-radius: var(--rm-radius-sm);
}
.rm-password-toggle:hover { color: var(--rm-forest); background: rgba(61, 107, 79, 0.08); }

/* ── Cards — real elevation, not flat boxes ─────────────────────────────── */
.rm-card {
    background: var(--rm-white);
    border-radius: var(--rm-radius-md);
    box-shadow: var(--rm-shadow-md);
    padding: var(--rm-space-5);
}

/* ── Alert / banner ──────────────────────────────────────────────────────── */
.rm-alert {
    display: flex;
    align-items: flex-start;
    gap: var(--rm-space-3);
    padding: var(--rm-space-4);
    border-radius: var(--rm-radius-sm);
    font-size: 0.9rem;
}
.rm-alert--warn { background: var(--rm-warn-bg); border: 1px solid var(--rm-warn-border); color: #6b4a1a; }
.rm-alert--danger { background: #fbeae7; border: 1px solid #e0a99a; color: var(--rm-danger); }
.rm-alert--info { background: #eaf1f5; border: 1px solid #b7cdd9; color: var(--rm-dusk); }

/* ── Badges ──────────────────────────────────────────────────────────────── */
.rm-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 4px 11px;
    border-radius: var(--rm-radius-full);
}
.rm-badge--moss { background: rgba(61,107,79,0.13); color: var(--rm-moss-dark); }
.rm-badge--clay { background: rgba(201,118,58,0.16); color: var(--rm-clay-dark); }
.rm-badge--fog  { background: var(--rm-fog-light); color: var(--rm-fog); }
.rm-badge--danger { background: rgba(161,63,47,0.13); color: var(--rm-danger); }

.rm-public-lands-label {
    background: rgba(255,255,255,0.92);
    border: none;
    box-shadow: 0 1px 3px rgba(20,32,25,.25);
    font-size: 0.7rem;
    font-weight: 600;
    padding: 1px 6px;
    color: #2c2c2a;
}
.rm-public-lands-label::before {
    display: none;
}

/* ── Skeleton loading state ──────────────────────────────────────────────── */
@keyframes rm-shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }
.rm-skeleton {
    background: linear-gradient(90deg, var(--rm-fog-light) 25%, #ededdf 37%, var(--rm-fog-light) 63%);
    background-size: 400% 100%;
    animation: rm-shimmer 1.4s ease infinite;
    border-radius: var(--rm-radius-sm);
}


/* Font direction: Inter throughout, no Fraunces in the Admin portal (matches
   static pages / spot detail / add-place / upgrade) */
.rm-admin-page h1,
.rm-admin-page h2,
.rm-admin-page h3,
.rm-admin-page h4 {
    font-family: var(--rm-font-body);
}