/*
 * Mesozoic Haven default prehistoric theme
 * ------------------------------------------
 * Loaded LAST on every page so this file is the main visual-theme control.
 *
 * Visual target:
 * - near-black carved stone shell
 * - warm earth-brown / bronze trim
 * - parchment / fossil-bone hero and reading surfaces
 * - restrained moss, river teal, and deep rust-crimson accents
 * - layered, hand-built expedition-panel depth without requiring image assets
 *
 * IMPORTANT FOR FUTURE EDITS:
 * Change the variables in :root first. Reusable layouts, cards, widgets,
 * buttons, tables, navigation, and status components inherit from them.
 */

:root {
    color-scheme: dark;

    /* ======================================================================
       1. Core palette — sampled/approximated from the visual reference
       ====================================================================== */

    /* Stone / darkness */
    --mh-void: #070705;
    --mh-stone-black: #0f0e0b;
    --mh-stone-deep: #17120d;
    --mh-stone: #20170f;
    --mh-stone-raised: #312418;

    /* Warm fossil / parchment */
    --mh-parchment: #a8886a;
    --mh-parchment-light: #c1a17f;
    --mh-parchment-dark: #8c6b4b;
    --mh-fossil-bone: #ead8bd;

    /* Ancient metal / sandstone */
    --mh-bronze: #9c7a5a;
    --mh-bronze-dark: #68482d;
    --mh-sandstone: #bd986b;

    /* Accents */
    --mh-sail-crimson: #8b341f;
    --mh-sail-crimson-bright: #a94a2c;
    --mh-river-teal: #456b68;
    --mh-fern-green: #596347;
    --mh-riptide-grey: #716c62;

    /* Compatibility aliases used by the original stylesheet. */
    --mh-river-night: var(--mh-stone-black);
    --mh-field-paper: var(--mh-stone-black);
    --mh-charcoal: #17130f;

    /* ======================================================================
       2. Global semantic surfaces
       ====================================================================== */

    --mh-page-bg: var(--mh-void);
    --mh-surface: #17130f;
    --mh-surface-soft: #211a13;
    --mh-surface-raised: #2a2118;
    --mh-text: #e1d1ba;
    --mh-muted: #b29c81;
    --mh-border: #4b3827;
    --mh-border-strong: #77583a;
    --mh-link: #c49b67;

    /* Shared widgets/components. */
    --mh-component-bg: var(--mh-surface);
    --mh-component-bg-soft: var(--mh-surface-soft);
    --mh-component-border: var(--mh-border);
    --mh-component-text: var(--mh-text);
    --mh-component-muted: var(--mh-muted);

    /* Semantic accents remain theme-aware, but deliberately earthy. */
    --mh-accent-info: #827151;
    --mh-accent-success: #667054;
    --mh-accent-warning: #b6884f;
    --mh-accent-danger: var(--mh-sail-crimson-bright);
    --mh-accent-neutral: #776e62;
    --mh-widget-accent: var(--mh-accent-info);

    /* Shared depth. */
    --mh-stone-shadow:
        inset 0 1px 0 rgba(218, 183, 132, 0.08),
        inset 0 -2px 0 rgba(0, 0, 0, 0.55),
        0 8px 22px rgba(0, 0, 0, 0.38);

    --mh-panel-shadow:
        inset 0 0 0 1px rgba(201, 158, 103, 0.07),
        inset 0 10px 24px rgba(255, 218, 164, 0.015),
        inset 0 -14px 28px rgba(0, 0, 0, 0.28),
        0 9px 24px rgba(0, 0, 0, 0.34);
}

/* ========================================================================== 
   3. Page atmosphere — layered CSS-only stone
   ========================================================================== */

html {
    background: var(--mh-void);
}

body {
    background:
        radial-gradient(ellipse at 18% 8%, rgba(111, 84, 50, 0.11) 0, transparent 28rem),
        radial-gradient(ellipse at 82% 24%, rgba(74, 83, 54, 0.055) 0, transparent 30rem),
        repeating-linear-gradient(17deg, rgba(255, 255, 255, 0.008) 0 1px, transparent 1px 8px),
        linear-gradient(180deg, #0b0a08 0%, var(--mh-void) 38rem, #090806 100%);
    color: var(--mh-text);
}

::selection {
    background: color-mix(in srgb, var(--mh-sail-crimson) 68%, transparent);
    color: var(--mh-fossil-bone);
}

a {
    color: var(--mh-link);
}

a:hover,
a:focus-visible {
    color: #ddb77f;
}

/* ========================================================================== 
   4. Header / navigation — heavy dark carved-stone impression
   ========================================================================== */

.mh-site-header {
    background:
        radial-gradient(ellipse at 50% -80%, rgba(146, 103, 58, 0.17), transparent 62%),
        repeating-linear-gradient(8deg, rgba(255, 255, 255, 0.012) 0 1px, transparent 1px 11px),
        linear-gradient(180deg, #17130f 0%, #0b0a08 68%, #070705 100%);
    border-top: 1px solid #362717;
    border-bottom: 3px solid var(--mh-bronze-dark);
    box-shadow:
        inset 0 -1px 0 #1c120b,
        inset 0 -5px 12px rgba(0, 0, 0, 0.5),
        0 8px 26px rgba(0, 0, 0, 0.48);
}

.mh-site-header__inner {
    position: relative;
}

/* Tiny sandstone/rust line helps the header read like an inset carved frame. */
.mh-site-header__inner::after {
    content: "";
    position: absolute;
    left: 22px;
    right: 22px;
    bottom: -18px;
    height: 1px;
    background: linear-gradient(90deg, transparent, #6c4b2e 15%, #9a673d 50%, #6c4b2e 85%, transparent);
    opacity: 0.72;
    pointer-events: none;
}

.mh-brand__name,
.mh-site-brand__name {
    color: var(--mh-fossil-bone);
    text-shadow: 0 2px 0 #000, 0 0 18px rgba(178, 132, 77, 0.12);
}

.mh-brand__tagline,
.mh-site-brand__tagline {
    color: #b58a58;
}

.mh-nav__link,
.mh-nav__search,
.mh-site-nav a,
.mh-search-link {
    color: #dbc5a7;
}

.mh-nav__link:hover,
.mh-nav__link:focus-visible,
.mh-nav__link.is-active,
.mh-nav__search:hover,
.mh-nav__search:focus-visible,
.mh-site-nav > a:hover,
.mh-site-nav > a:focus-visible,
.mh-search-link:hover,
.mh-search-link:focus-visible {
    background:
        linear-gradient(180deg, rgba(139, 52, 31, 0.74), rgba(84, 30, 18, 0.82));
    color: #f0dfc5;
    box-shadow:
        inset 0 1px rgba(215, 154, 91, 0.18),
        inset 0 -1px rgba(0, 0, 0, 0.48);
}

.mh-nav__dropdown,
.mh-nav-dropdown {
    background:
        repeating-linear-gradient(10deg, rgba(255, 255, 255, 0.01) 0 1px, transparent 1px 9px),
        #12100d;
    border: 1px solid #5d432c;
    box-shadow:
        inset 0 0 0 2px rgba(0, 0, 0, 0.42),
        0 14px 34px rgba(0, 0, 0, 0.6);
}

.mh-nav__dropdown a,
.mh-nav-dropdown a {
    color: #d8c2a4;
}

.mh-nav__dropdown a:hover,
.mh-nav__dropdown a:focus-visible,
.mh-nav-dropdown a:hover,
.mh-nav-dropdown a:focus-visible {
    background: #2b1d13;
    color: #eccda3;
}

/* ========================================================================== 
   5. Hero — parchment inset surrounded by the dark site shell
   ========================================================================== */

.mh-hero {
    border: 2px solid #57402c;
    outline: 1px solid #241910;
    outline-offset: 3px;
    background:
        radial-gradient(circle at 16% 25%, rgba(93, 58, 29, 0.07) 0 2px, transparent 3px),
        radial-gradient(circle at 82% 68%, rgba(75, 47, 25, 0.055) 0 1px, transparent 2px),
        repeating-linear-gradient(8deg, rgba(70, 43, 23, 0.022) 0 1px, transparent 1px 10px),
        linear-gradient(145deg, #b29472 0%, #a48161 46%, #967253 100%);
    color: #21150d;
    box-shadow:
        inset 0 0 0 1px rgba(235, 208, 167, 0.25),
        inset 0 0 42px rgba(70, 38, 18, 0.16),
        0 13px 30px rgba(0, 0, 0, 0.46);
}

.mh-hero__title {
    color: #5d2416;
    text-shadow: 0 1px 0 rgba(255, 222, 179, 0.28);
}

.mh-hero__text {
    color: #322317;
}

.mh-eyebrow {
    color: #4d2c18;
}

/* ========================================================================== 
   6. Shared dark panels / cards / widgets
   ========================================================================== */

.mh-card,
.mh-columns--cards > *,
.mh-stat,
.mh-event-card,
.mh-details,
.mh-server-summary,
.mh-media-card,
.mh-spotlight,
.mh-callout,
.mh-schedule {
    border-color: var(--mh-component-border);
    background:
        repeating-linear-gradient(12deg, rgba(255, 255, 255, 0.008) 0 1px, transparent 1px 10px),
        linear-gradient(145deg, #1c1712, #12100d);
    color: var(--mh-component-text);
    box-shadow: var(--mh-panel-shadow);
}

.mh-card,
.mh-stat,
.mh-event-card,
.mh-details,
.mh-server-summary,
.mh-media-card,
.mh-spotlight,
.mh-callout {
    position: relative;
}

/* A fine inner bronze line creates the inset-panel look from the reference. */
.mh-card::after,
.mh-stat::after,
.mh-event-card::after,
.mh-server-summary::after,
.mh-spotlight::after {
    content: "";
    position: absolute;
    inset: 4px;
    border: 1px solid rgba(147, 105, 65, 0.17);
    border-radius: calc(var(--mh-radius-md) - 4px);
    pointer-events: none;
}

.mh-columns--cards > * {
    border-color: #5a402a;
}

.mh-card--soft {
    background:
        repeating-linear-gradient(12deg, rgba(255, 255, 255, 0.008) 0 1px, transparent 1px 11px),
        linear-gradient(145deg, #251c14, #19140f);
}

.mh-card--featured {
    border-top: 4px solid var(--mh-widget-accent, var(--mh-bronze));
}

.mh-card--note {
    border-left: 5px solid var(--mh-widget-accent, var(--mh-sandstone));
}

.mh-card--riptide {
    --mh-widget-accent: var(--mh-sail-crimson);
    border-color: #663323;
    background:
        radial-gradient(circle at 100% 0, rgba(139, 52, 31, 0.14), transparent 40%),
        linear-gradient(145deg, #211511, #15100d);
}

.mh-card--riptide .mh-card__eyebrow {
    color: #c66a45;
}

.mh-card__eyebrow,
.mh-callout__title,
.mh-spotlight__label {
    color: var(--mh-widget-accent, var(--mh-sandstone));
}

.mh-card--interactive:hover,
.mh-card--interactive:focus-within {
    transform: translateY(-2px);
    border-color: #7b5636;
    box-shadow:
        inset 0 0 0 1px rgba(211, 164, 103, 0.08),
        0 14px 32px rgba(0, 0, 0, 0.48);
}

/* ========================================================================== 
   7. Optional parchment surface — useful for long-form reading/content blocks
   ========================================================================== */

.mh-card--parchment,
.mh-surface--parchment {
    --mh-component-text: #24170e;
    --mh-component-muted: #5e4935;
    background:
        radial-gradient(circle at 15% 22%, rgba(76, 45, 22, 0.045) 0 2px, transparent 3px),
        repeating-linear-gradient(7deg, rgba(79, 49, 27, 0.02) 0 1px, transparent 1px 11px),
        linear-gradient(145deg, #b79a77, #a78665);
    border-color: #725238;
    color: #24170e;
    box-shadow:
        inset 0 0 26px rgba(79, 43, 20, 0.11),
        0 9px 24px rgba(0, 0, 0, 0.38);
}

.mh-card--parchment a,
.mh-surface--parchment a {
    color: #682f1d;
}

.mh-card--parchment .mh-muted,
.mh-surface--parchment .mh-muted {
    color: #66503b;
}

/* ========================================================================== 
   8. Tables — expedition ledger styling
   ========================================================================== */

.mh-table {
    background: #14110e;
    color: var(--mh-text);
    box-shadow: var(--mh-panel-shadow);
}

.mh-table th,
.mh-table td {
    border-color: #503a27;
}

.mh-table th {
    background: #2a1f16;
    color: #d9bc92;
}

.mh-table tbody tr:nth-child(even) td {
    background: rgba(156, 122, 90, 0.045);
}

.mh-table caption {
    color: #d2aa75;
}

/* ========================================================================== 
   9. Buttons — sandstone/bronze plates + rust primary action
   ========================================================================== */

.mh-button {
    border: 1px solid #705039;
    background:
        linear-gradient(180deg, #b0926f, #927250);
    color: #21150d;
    box-shadow:
        inset 0 1px rgba(255, 229, 191, 0.22),
        inset 0 -2px rgba(71, 42, 23, 0.18),
        0 4px 10px rgba(0, 0, 0, 0.26);
}

.mh-button:hover,
.mh-button:focus-visible {
    background: linear-gradient(180deg, #c09e76, #9d7954);
    border-color: #8a623f;
    color: #160e09;
}

.mh-button--primary {
    border-color: #76301e;
    background:
        linear-gradient(180deg, #9d4027, #762a1b);
    color: #f0ddc1;
}

.mh-button--primary:hover,
.mh-button--primary:focus-visible {
    background: linear-gradient(180deg, #b04b2c, #86321f);
    border-color: #9a452b;
    color: #fff0d8;
}

/* ========================================================================== 
   10. Status / tags / small accents
   ========================================================================== */

.mh-badge,
.mh-status {
    border-color: color-mix(in srgb, var(--mh-widget-accent) 48%, #443222);
    background: color-mix(in srgb, var(--mh-widget-accent) 10%, #17130f);
    color: #dac5a8;
}

.mh-event-card__date {
    border: 1px solid #5d4029;
    background: #20160f;
    color: #c58a54;
    box-shadow: inset 0 0 12px rgba(0, 0, 0, 0.28);
}

/* ========================================================================== 
   11. Placeholders / developer reference code
   ========================================================================== */

.mh-placeholder {
    border-color: #5a422e;
    background:
        repeating-linear-gradient(-45deg, rgba(186, 139, 82, 0.028) 0 8px, transparent 8px 16px),
        #14110e;
    color: #a99275;
}

.mh-reference-code {
    background:
        linear-gradient(180deg, #0d0c0a, #080806);
    border-color: #503925;
    color: #e0c9aa;
    box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.4);
}

code {
    color: #ddbd90;
}

/* ========================================================================== 
   12. Sidebar — darker stacked stone-panel territory
   ========================================================================== */

.mh-sidebar {
    padding: 10px;
    border: 1px solid #332419;
    border-radius: var(--mh-radius-md);
    background:
        repeating-linear-gradient(14deg, rgba(255, 255, 255, 0.006) 0 1px, transparent 1px 10px),
        #0d0c0a;
    box-shadow:
        inset 0 0 0 2px #080705,
        inset 0 0 0 3px rgba(101, 72, 43, 0.24),
        0 12px 30px rgba(0, 0, 0, 0.36);
}

/* ========================================================================== 
   13. Footer — bottom stone slab
   ========================================================================== */

.mh-site-footer {
    background:
        repeating-linear-gradient(9deg, rgba(255, 255, 255, 0.008) 0 1px, transparent 1px 11px),
        linear-gradient(180deg, #12100d 0%, #090806 100%);
    border-top: 3px solid #4f3824;
    box-shadow:
        inset 0 4px 12px rgba(0, 0, 0, 0.45),
        0 -5px 20px rgba(0, 0, 0, 0.24);
}

.mh-site-footer,
.mh-site-footer a {
    color: #d1b99a;
}

.mh-site-footer .mh-muted {
    color: #9f8d76;
}

/* ========================================================================== 
   14. Native controls / accessibility
   ========================================================================== */

input,
select,
textarea {
    background: #15110d;
    border: 1px solid #5c422c;
    color: var(--mh-text);
}

:focus-visible {
    outline: 3px solid #c4834c;
    outline-offset: 3px;
}

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