/* Frogwood Manor shared color palette — umber / plum / cobalt theme */
:root {
    /* ── base ── */
    --fm-deep:     #382820;
    --fm-dark:      #301828;
    --fm-surface:   #2a2a50;
    --fm-muted:     #9888a0;
    --fm-light:     #f8d888;
    --fm-cream:     #f8e8d8;
    --fm-bg:        #0c0810;

    /* ── blues ── */
    --fm-cobalt:    #4080f0;
    --fm-sky:       #6080e8;

    /* ── warm ── */
    --fm-brand:     #a85a18;
    --fm-amber:     #e8a040;

    /* ── purples / pinks ── */
    --fm-violet:    #a030c8;
    --fm-sage:      #6a9878;
    --fm-pink:      #f040a0;
    --fm-pink-light:#e860c0;
    --fm-rose:      #c02070;
    --fm-lilac:     #c8a0d8;
    --fm-plum:      #281838;
    --fm-peach:     #f0b060;

    /* ── text hierarchy ── */
    --fm-text-bright:    #f8f0e8;
    --fm-text-body:      #c8b8d0;
    --fm-text-dim:       #887898;
    --fm-text-faint:     #584860;
    --fm-text-disabled:  #382838;

    /* ── dark grounds ── */
    --fm-void:        #060408;
    --fm-abyss:       #0a0614;
    --fm-deep-plum:   #180e28;
    --fm-deep-navy:   #0e1428;

    /* ── surface ramp ── */
    --fm-surface-low:  #1e1c38;
    --fm-surface-mid:  #343058;
    --fm-surface-high: #484470;
    --fm-raised:       #585488;

    /* ── blue extended ── */
    --fm-navy:        #1a2a80;
    --fm-royal:       #2850c8;
    --fm-periwinkle:  #8098e8;
    --fm-ice:         #b0c0f8;
    --fm-mist:        #d8e0f8;

    /* ── violet/purple extended ── */
    --fm-deep-violet:   #580878;
    --fm-bright-violet: #c050f0;
    --fm-lavender:      #d8b0f0;
    --fm-pale-lilac:    #ecd8f8;

    /* ── pink extended ── */
    --fm-hot-pink:   #ff1880;
    --fm-blush:      #f890c8;
    --fm-petal:      #f8c0e0;
    --fm-magenta:    #e020a0;

    /* ── warm/amber extended ── */
    --fm-rust:    #803010;
    --fm-terra:   #c04820;
    --fm-gold:    #d4a020;
    --fm-butter:  #f8e098;
    --fm-honey:   #e8b848;

    /* ── green extended ── */
    --fm-forest:    #284838;
    --fm-moss:      #486848;
    --fm-fern:      #5a8868;
    --fm-mint:      #90c8a0;
    --fm-pale-sage: #b8d8b8;

    /* ── teal ── */
    --fm-teal-deep:   #103830;
    --fm-teal:        #208060;
    --fm-teal-bright: #30b888;
    --fm-teal-mist:   #88d8b8;

    /* ── borders ── */
    --fm-border-dark:  #201828;
    --fm-border-mid:   #403058;
    --fm-border-light: #605880;
    --fm-border-warm:  #604020;
    --fm-border-cool:  #304080;

    /* ── nav ── */
    --nav-accent:      var(--fm-brand);
    --nav-glow:        rgba(168,90,24,0.4);
    --nav-brand:       #d08838;
    --nav-brand-glow:  rgba(208,136,56,0.7);
}

/* Sub-nav button colors — all pages use these */
body.fm-page { background: var(--fm-bg); --credit-color: var(--fm-muted); }
body.fm-page .sub-nav { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 36px; }
body.fm-page .sub-nav .nav-card {
    font-family: 'Press Start 2P', monospace;
    font-size: 8px;
    letter-spacing: 0.08em;
    padding: 10px 16px;
    border: 2px solid;
    text-decoration: none;
}
body.fm-page .sub-nav .nav-card::after { display: none; }
body.fm-page .sub-nav .nav-card:hover { background: inherit !important; color: inherit !important; box-shadow: none !important; }

/* c-about: violet plum (formerly c-sage) */
body.fm-page .sub-nav .nav-card.c-about { background: var(--fm-sage); color: var(--fm-deep); border-color: var(--fm-sage); }
body.fm-page .sub-nav .nav-card.c-about:hover { background: transparent; color: var(--fm-cream); border-color: var(--fm-sage); }

/* c-recordings: sky blue (formerly c-cyan) */
body.fm-page .sub-nav .nav-card.c-recordings { background: var(--fm-sky); color: var(--fm-deep); border-color: var(--fm-sky); }
body.fm-page .sub-nav .nav-card.c-recordings:hover { background: transparent; color: var(--fm-cream); border-color: var(--fm-sky); }

/* c-works: amber (formerly c-yellow) */
body.fm-page .sub-nav .nav-card.c-works { background: var(--fm-amber); color: var(--fm-deep); border-color: var(--fm-amber); }
body.fm-page .sub-nav .nav-card.c-works:hover { background: transparent; color: var(--fm-cream); border-color: var(--fm-amber); }

/* c-events: brand umber (formerly c-green) */
body.fm-page .sub-nav .nav-card.c-events { background: var(--fm-brand); color: var(--fm-deep); border-color: var(--fm-brand); }
body.fm-page .sub-nav .nav-card.c-events:hover { background: transparent; color: var(--fm-cream); border-color: var(--fm-brand); }

/* c-rose: deep pink */
body.fm-page .sub-nav .nav-card.c-rose { background: var(--fm-rose); color: var(--fm-deep); border-color: var(--fm-rose); }
body.fm-page .sub-nav .nav-card.c-rose:hover { background: transparent; color: var(--fm-cream); border-color: var(--fm-rose); }

/* c-personnel: cobalt (formerly c-blue) */
body.fm-page .sub-nav .nav-card.c-personnel { background: var(--fm-rose); color: var(--fm-deep); border-color: var(--fm-rose); }
body.fm-page .sub-nav .nav-card.c-personnel:hover { background: transparent; color: var(--fm-cream); border-color: var(--fm-rose); }

/* c-magenta: hot pink */
body.fm-page .sub-nav .nav-card.c-magenta { background: var(--fm-pink); color: var(--fm-deep); border-color: var(--fm-pink); }
body.fm-page .sub-nav .nav-card.c-magenta:hover { background: transparent; color: var(--fm-cream); border-color: var(--fm-pink); }

/* c-links: teal */
body.fm-page .sub-nav .nav-card.c-links { background: var(--fm-teal); color: var(--fm-deep); border-color: var(--fm-teal); }
body.fm-page .sub-nav .nav-card.c-links:hover { background: transparent; color: var(--fm-cream); border-color: var(--fm-teal); }

/* c-photography: lavender */
body.fm-page .sub-nav .nav-card.c-photography { background: var(--fm-lavender); color: var(--fm-deep); border-color: var(--fm-lavender); }
body.fm-page .sub-nav .nav-card.c-photography:hover { background: transparent; color: var(--fm-cream); border-color: var(--fm-lavender); }

/* About button self-link hider */
body.fm-page .sub-nav a[href="about.html"] {
    background: var(--fm-sage);
    color: var(--fm-deep);
    border-color: var(--fm-sage);
}

body.fm-page footer { color: var(--fm-muted); }
body.fm-page footer span { color: var(--fm-brand); }