/*
 * ForeverTome brand theme — WoW: Forever palette.
 *
 * Loaded after Tabler and before site.css. Tabler 1.5 builds its whole surface
 * from a gray ramp plus --tblr-primary, and picks light/dark values with the CSS
 * light-dark() function, so retheming is a matter of redefining those tokens
 * rather than restyling components.
 *
 *   Deep ocean    #142F3A   page background, navigation
 *   Evergreen teal #2F7068  buttons, selected controls
 *   Antique gold  #C8AE80   headings, links, fine borders
 *   Parchment     #F0E6D2   body text, button labels
 *
 * The palette is a dark one (parchment *on* ocean). Light mode inverts it —
 * parchment page, ocean text — and needs two derived shades, because antique
 * gold on parchment is far below a readable contrast ratio.
 */

:root {
    --ft-ocean: #142f3a;
    --ft-ocean-deep: #0f242d;
    --ft-ocean-raised: #1b3d4a;
    --ft-ocean-high: #244b5a;

    --ft-teal: #2f7068;
    --ft-teal-bright: #3c8a80;
    --ft-teal-deep: #24564f;

    --ft-gold: #c8ae80;
    --ft-gold-bright: #dcc79d;
    --ft-gold-deep: #7c6234; /* derived: legible gold on a parchment background */

    --ft-parchment: #f0e6d2;
    --ft-parchment-dim: #d9cdb6;
    --ft-slate: #94a7ae; /* derived: muted text that reads on both ends */
}

/* -------------------------------------------------- Tabler neutral ramp ---
 * A duotone ramp: parchment at the light end, deep ocean at the dark end.
 * Tabler reaches for these for surfaces, muted text, icons and form chrome, so
 * tinting the ramp keeps anything not named below inside the palette.
 */
:root,
[data-bs-theme="light"],
[data-bs-theme="dark"] {
    --tblr-gray-50: #fbf7ef;
    --tblr-gray-100: #f5efe1;
    --tblr-gray-200: #f0e6d2;
    --tblr-gray-300: #d3c6ac;
    --tblr-gray-400: #94a7ae;
    --tblr-gray-500: #6c838c;
    --tblr-gray-600: #46626e;
    --tblr-gray-700: #2a4a57;
    --tblr-gray-800: #1b3d4a;
    --tblr-gray-900: #142f3a;

    /* Evergreen teal drives buttons, focus rings and selected controls. */
    --tblr-primary: #2f7068;
    --tblr-primary-rgb: 47, 112, 104;
    --tblr-primary-fg: #f0e6d2;

    --tblr-body-bg: light-dark(#f0e6d2, #142f3a);
    --tblr-body-color: light-dark(#1b3d4a, #f0e6d2);

    --tblr-bg-surface: light-dark(#fbf7ef, #1b3d4a);
    --tblr-bg-surface-primary: light-dark(#fbf7ef, #1b3d4a);
    --tblr-bg-surface-secondary: light-dark(#f0e6d2, #0f242d);
    --tblr-bg-surface-tertiary: light-dark(#e8dcc4, #17353f);
    --tblr-bg-forms: light-dark(#fffdf8, #0f242d);

    /* Fine borders in antique gold, kept low-alpha so they read as hairlines. */
    --tblr-border-color: light-dark(rgba(20, 47, 58, .16), rgba(200, 174, 128, .20));
    --tblr-border-color-translucent: light-dark(rgba(20, 47, 58, .10), rgba(200, 174, 128, .14));
    --tblr-border-active-color: light-dark(rgba(20, 47, 58, .32), rgba(200, 174, 128, .42));

    --tblr-link-color: light-dark(#7c6234, #c8ae80);
    --tblr-link-hover-color: light-dark(#5e4a27, #dcc79d);

    --tblr-secondary: light-dark(#6c838c, #94a7ae);
    --tblr-icon-color: light-dark(#6c838c, #94a7ae);
    --tblr-active-bg: light-dark(rgba(47, 112, 104, .08), rgba(200, 174, 128, .10));

    /* Navigation shares the page background, per the palette. */
    --tblr-navbar-bg: light-dark(#f0e6d2, #142f3a);
}

/*
 * Tabler's own [data-bs-theme=dark] block sets these, and matches at the same
 * specificity as :root — so they are restated here one level higher.
 */
:root[data-bs-theme="dark"] {
    --tblr-heading-color: #c8ae80;
    --tblr-body-color-rgb: 240, 230, 210;
    --tblr-body-bg-rgb: 20, 47, 58;
    --tblr-emphasis-color-rgb: 240, 230, 210;
    --tblr-secondary-color-rgb: 148, 167, 174;
    --tblr-secondary-bg-rgb: 27, 61, 74;
    --tblr-tertiary-color-rgb: 217, 205, 182;
    --tblr-tertiary-bg-rgb: 23, 53, 63;
    --tblr-link-color-rgb: 200, 174, 128;
    --tblr-link-hover-color-rgb: 220, 199, 157;
}

:root[data-bs-theme="light"] {
    --tblr-heading-color: #142f3a;
}

/* ------------------------------------------------------------ components */

/* Headings are gold in dark mode; card titles opt in explicitly. */
.card-title,
.page-title {
    color: var(--tblr-heading-color);
}

/* Parchment button labels on evergreen teal. */
.btn-primary {
    --tblr-btn-color: var(--ft-parchment);
    --tblr-btn-hover-color: var(--ft-parchment);
    --tblr-btn-active-color: var(--ft-parchment);
    --tblr-btn-bg: var(--ft-teal);
    --tblr-btn-border-color: var(--ft-teal);
    --tblr-btn-hover-bg: var(--ft-teal-bright);
    --tblr-btn-hover-border-color: var(--ft-teal-bright);
    --tblr-btn-active-bg: var(--ft-teal-deep);
    --tblr-btn-active-border-color: var(--ft-teal-deep);
}

/* The sticky header sits on the page background, so it needs its own hairline. */
header.navbar {
    border-bottom: var(--tblr-border-width) solid var(--tblr-border-color);
}

/* Gold on the current nav entry, rather than Tabler's primary underline. */
.navbar-nav .nav-item.active > .nav-link,
.navbar-nav .nav-link.active {
    color: var(--ft-gold);
}

/* ----------------------------------------------------- brand accent tints
 * Three accents replace Tabler's rainbow of category colours, so news badges
 * and thumbnails stay inside the palette.
 */
.ft-accent-teal { --ft-accent: var(--ft-teal); --ft-accent-fg: light-dark(#24564f, #7fbdb2); }
.ft-accent-gold { --ft-accent: var(--ft-gold); --ft-accent-fg: light-dark(#7c6234, #dcc79d); }
.ft-accent-ocean { --ft-accent: var(--ft-ocean-high); --ft-accent-fg: light-dark(#2a4a57, #a8c4ce); }

.ft-badge {
    display: inline-flex;
    align-items: center;
    padding: .125rem .5rem;
    border: 1px solid color-mix(in srgb, var(--ft-accent) 38%, transparent);
    border-radius: var(--tblr-border-radius-pill);
    background: color-mix(in srgb, var(--ft-accent) 16%, transparent);
    color: var(--ft-accent-fg);
    font-size: .75rem;
    font-weight: 600;
    line-height: 1.4;
}

/* Compact variant for "Soon" / "New" pills. Accent comes from .ft-accent-*. */
.ft-badge-sm {
    padding: 0 .375rem;
    text-transform: uppercase;
    font-size: .625rem;
    letter-spacing: .03em;
}

/* Tinted square used for the section icons on the home page. */
.ft-avatar {
    background: color-mix(in srgb, var(--ft-accent) 16%, transparent);
    color: var(--ft-accent-fg);
}

.text-gold { color: var(--ft-gold); }
.text-teal { color: var(--ft-teal-bright); }