/* ============================================================================
   HTGF — legacy-palette.css                              v20260908t · Tech desk B2
   ONE override sheet for pages that still render the TheGem/Elementor shell
   (family C in DESIGN-SYSTEM-SPEC-2026-08-29.md). Enqueued LAST (priority 999)
   by wp-content/mu-plugins/htgf-legacy-palette.php — never on htgf-kit / htgf-v5
   pages (those exit before wp_enqueue_scripts reaches this sheet).
   Source of every value: Design-System/TOKENS-2026-09-08.md. No off-palette hex.
   Surgical: colours + fonts only. No display:none, no widths, no layout.
   Rollback: delete the mu-plugin (or this file) + `wp litespeed-purge all`.
   ========================================================================== */

:root{
  /* ---- the sheet, by NAME (light) ---- */
  --bg:#F5E9A6; --bg-deep:#EEDD8C; --card:#FFFDF7; --paper:#FFFDF7; --warm:#F7EFE0;
  --band:#214E3B; --forest:#214E3B; --forest-deep:#173829; --forest-night:#0F241B;
  --ink:#173829; --text:#173829; --muted:#4F6157; --on-band:#FAF7EF; --on-band-muted:rgba(250,247,239,.72);
  --line:rgba(33,78,59,.16); --mustard:#E8B647; --mustard-deep:#7A5F12;
  --cta:#214E3B; --on-cta:#FAF7EF; --recall:#CE3B2B; --papaya:#FF7043;
  --sage:#8FA58A; --sage-tint:#DCE6DC; --peach:#FFD9C0; --rose:#FFD9C0;
  --tier-d:var(--mustard); --tier-p:var(--forest); --tier-o:var(--sage-tint); --tier-u:rgba(33,48,42,.35);
  /* legacy aliases */
  --cream:var(--bg); --ghost:var(--card); --soft:var(--warm); --red:var(--recall);
  --font-display:"Montserrat",system-ui,sans-serif; --font-body:"Nunito",system-ui,sans-serif;

  /* ---- TheGem theme-option variables re-pointed at the sheet ----
     (custom-*.css defines these on :root earlier in the cascade; same specificity, later wins) */
  --thegem-to-main-bg-color:var(--bg); --main-bg-color:var(--bg); --main-bg-color-08:rgba(245,233,166,.8);
  --styled-bg-color:var(--warm);
  --thegem-to-body-color:var(--ink); --thegem-to-body-color-07:rgba(23,56,41,.7);
  --thegem-to-h1-color:var(--forest-deep); --thegem-to-h2-color:var(--forest-deep); --thegem-to-h3-color:var(--forest-deep);
  --thegem-to-h4-color:var(--forest-deep); --thegem-to-h5-color:var(--forest-deep); --thegem-to-h6-color:var(--forest-deep);
  --thegem-to-link-color:var(--forest); --thegem-to-link-color-hover:var(--forest-deep); --thegem-to-link-color-active:var(--forest-deep);
  --thegem-to-top-area-link-color:var(--forest);
  --thegem-to-styled-color1:var(--forest); --thegem-to-styled-color1-03:rgba(33,78,59,.3);
  --thegem-to-styled-color2:var(--muted); --thegem-to-styled-color4:var(--forest-deep);
  --thegem-to-divider-color:var(--line); --thegem-to-box-border-color:var(--line);
  --thegem-to-button-basic-color:var(--on-cta); --thegem-to-button-basic-color-hover:var(--on-cta);
  --thegem-to-button-basic-background-color:var(--cta); --thegem-to-button-basic-background-color-hover:var(--forest-deep);
  --thegem-to-hover-default-color:var(--mustard); --thegem-to-hover-default-color-03:rgba(232,182,71,.3); --thegem-to-hover-default-color-08:rgba(232,182,71,.8);
  --thegem-to-pagination-color:var(--muted); --thegem-to-pagination-background-color:var(--card);
  --thegem-to-pagination-color-hover:var(--forest); --thegem-to-pagination-color-active:var(--forest-deep);
  --thegem-to-form-elements-background-color:var(--card); --thegem-to-form-elements-text-color:var(--ink); --thegem-to-form-elements-border-color:var(--line);
  --thegem-to-breadcrumbs-color:var(--muted); --thegem-to-breadcrumbs-color-hover:var(--forest); --thegem-to-breadcrumbs-color-active:var(--forest-deep);
  --thegem-to-date-filter-subtitle-color:var(--muted); --thegem-to-portfolio-date-color:var(--muted);
  --thegem-to-system-icons-font-color:var(--muted); --thegem-to-system-icons-font2-color:var(--sage);
  --thegem-to-socials-sharing-color:var(--muted);
  --thegem-to-product-title-color:var(--forest-deep); --thegem-to-product-price-color:var(--forest-deep); --thegem-to-product-price-cart-color:var(--forest-deep);
  --thegem-to-product-grid-title-color:var(--forest-deep); --thegem-to-product-grid-title-hover-color:var(--forest);
  --thegem-to-product-grid-category-color:var(--muted); --thegem-to-product-grid-price-color:var(--forest-deep); --thegem-to-product-grid-icon-color:var(--forest);
  --thegem-to-navigation-background-color:var(--card);
  --thegem-to-mobile-menu-bg-color:var(--card); --thegem-to-mobile-menu-level1-bg-color:var(--card); --thegem-to-mobile-menu-level2-bg-color:var(--card); --thegem-to-mobile-menu-level3-bg-color:var(--card);
  --thegem-to-mobile-menu-level1-active-bg-color:var(--sage-tint); --thegem-to-mobile-menu-border-color:var(--line);
  --thegem-to-menu-level2-bg-color:var(--card); --thegem-to-menu-level3-bg-color:var(--card); --thegem-to-menu-level2-hover-bg-color:var(--sage-tint); --thegem-to-menu-level2-active-bg-color:var(--sage-tint);
  --thegem-to-menu-level2-border-color:var(--line); --thegem-to-menu-level3-active-bg-color:var(--card);
  --thegem-to-mobile-menu-btn-color:var(--forest);
}

/* ---- page ground: the compiled theme CSS hard-codes body backgrounds, so set them directly ---- */
html,body,#page,#main-content,.main-content,.page-wrapper{background-color:var(--bg)}
body{color:var(--ink);font-family:var(--font-body)}
/* ---- content containers = warm-white card on the yellow ground (TheGem page body, Elementor sections/widgets) ---- */
#main-content>.block-content,#main-content .block-content>.container,.page-content,.block-content .panel-center,
.elementor-widget-container .bordered-box,.gem-wrapbox,.bordered-box{background-color:var(--card)}
#main-content>.block-content{border-radius:12px;border:1px solid var(--line)}
.gem-dummy,.default-background,.gem-table thead,.elementor-widget-sidebar .mc4wp-form-fields,.sidebar .mc4wp-form-fields{background-color:var(--warm)}
/* ---- type: forest-deep Montserrat headings, Nunito body ---- */
h1,h2,h3,h4,h5,h6,.title-h1,.title-h2,.title-h3,.title-h4,.title-h5,.title-h6,.elementor-heading-title{color:var(--forest-deep);font-family:var(--font-display)}
body,.text-body,.text-body-tiny,.title-text-body,p,li,td,th,label,.elementor-widget-text-editor{color:var(--ink);font-family:var(--font-body)}
.widget-title,.portfolio-sorting label,.gem-prev:after,.gem-next:after{color:var(--forest-deep)}
.gem-news-item-date,.related-element-info .gem-post-date,.date-color,.combobox-wrapper .combobox-text,.socials-sharing a.socials-item,
.portfolio-item .caption .title,.portfolio-item .caption .title a,.portfolio-item .caption .subtitle,.quickfinder-item-text,.quickfinder-item-text a{color:var(--muted)}
/* ---- links + buttons: forest CTA, forest-deep hover (papaya is reserved for recall/alerts on the sheet) ---- */
a,#main-content a{color:var(--forest)}
a:hover,#main-content a:hover{color:var(--forest-deep)}
.gem-button,body .wp-block-button .wp-block-button__link,input[type="submit"],button[type="submit"],.comment-form .form-submit .gem-button.submit,.wpcf7-submit,
.woocommerce .button,.woocommerce button.button,.woocommerce a.button,.single_add_to_cart_button{background-color:var(--cta);color:var(--on-cta);border-color:var(--cta)}
.gem-button:hover,body .wp-block-button .wp-block-button__link:hover,input[type="submit"]:hover,button[type="submit"]:hover,.comment-form .form-submit .gem-button.submit:hover,.wpcf7-submit:hover,
.woocommerce .button:hover,.woocommerce button.button:hover,.woocommerce a.button:hover,.single_add_to_cart_button:hover{background-color:var(--forest-deep);color:var(--on-cta);border-color:var(--forest-deep)}
.gem-button.gem-button-style-outline{background-color:transparent;color:var(--forest);border-color:var(--forest)}
.gem-button.gem-button-style-outline:hover{background-color:var(--forest);color:var(--on-cta)}
/* ---- lines, panels, forms ---- */
.gem-default-divider,.blog-style-default article:not(.sticky),.thegem-accordion__item:last-child,.portfolio-filter-tabs.style-alternative.separator,.bordered-box{border-color:var(--line)}
.skill-line,.thegem-tabs__nav-line{background-color:var(--line)}
input[type="text"],input[type="password"],input[type="email"],input[type="url"],input[type="number"],input[type="search"],input[type="tel"],input[type="date"],select,textarea{background-color:var(--card);color:var(--ink);border-color:var(--line)}
input::placeholder,textarea::placeholder{color:var(--muted)}
/* ---- chrome: header stays a card surface, footer band + colophon on forest ---- */
#site-header,#site-header-wrapper,.header-main{background-color:var(--card)}
#footer-nav,footer#footer-nav.site-footer{background-color:var(--band);border-top-color:var(--forest-deep)}
#colophon{background-color:var(--forest-deep)}
#footer-nav,#footer-nav p,#footer-nav li,#footer-nav .widget-title,#colophon,#colophon p{color:var(--on-band)}
#footer-nav a,#colophon a{color:var(--on-band)}
#footer-nav a:hover,#colophon a:hover{color:var(--mustard)}
/* ---- mustard = active / focus only ---- */
#primary-menu.no-responsive>li.menu-item-current>a,#primary-menu.no-responsive>li.current-menu-item>a{color:var(--forest-deep)}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{outline:3px solid var(--mustard)!important;outline-offset:2px!important}
/* ---- pagination ---- */
.gem-pagination .current,body .vc_grid-pagination .vc_grid-pagination-list li.vc_grid-page.vc_grid-active a{background-color:var(--forest-deep);color:var(--on-band)}
/* ---- red stays exactly where the theme already means alert (required marks, out-of-stock) → sheet recall red ---- */
span.req{color:var(--recall)}
.product .out-of-stock-label,.product-gallery-labels .product-labels .out-of-stock-label{background-color:var(--recall)}
.product .out-of-stock-label:after,.product-gallery-labels .product-labels .out-of-stock-label:after{border-left-color:var(--recall);border-right-color:var(--recall)}

/* ---- Menu v4.1 (2026-09-08) on the legacy shell: APP pill / BETA mark via item classes set by apply_menu_v41.php ---- */
#primary-menu li.nav-app>a::after{content:"App";display:inline-block;margin-left:6px;padding:2px 5px;border-radius:6px;background:var(--mustard);color:var(--forest-deep);font-family:ui-monospace,Menlo,monospace;font-size:.62em;font-weight:800;letter-spacing:.08em;text-transform:uppercase;vertical-align:2px}
#primary-menu li.nav-app.nav-beta>a::after{content:"App · Beta"}
#primary-menu li.recall-link>a{color:var(--recall)!important;font-weight:800}
#primary-menu li.lga-link>a{color:var(--mustard-deep)!important;font-weight:800}
#primary-menu li.join>a{color:var(--forest-deep)!important;font-weight:800}
/* ---- reduced motion respected (sheet) ---- */
@media (prefers-reduced-motion:reduce){*{transition-duration:.01ms!important;animation-duration:.01ms!important}}

/* ---- dark (sheet: prefers-color-scheme dark + [data-theme=dark]) ---- */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#0F241B; --bg-deep:#0F241B; --card:#173829; --paper:#173829; --warm:#173829; --band:#173829;
    --ink:#F4EFE3; --text:#F4EFE3; --muted:#B9C4BB; --line:rgba(244,239,227,.14);
    --cta:#FF7043; --on-cta:#FFFFFF; --recall:#E05A48; --tier-p:var(--sage); --tier-o:rgba(143,165,138,.35); --tier-u:rgba(244,239,227,.35);
    --forest-deep:#F4EFE3;
  }
}
:root[data-theme="dark"]{
  --bg:#0F241B; --bg-deep:#0F241B; --card:#173829; --paper:#173829; --warm:#173829; --band:#173829;
  --ink:#F4EFE3; --text:#F4EFE3; --muted:#B9C4BB; --line:rgba(244,239,227,.14);
  --cta:#FF7043; --on-cta:#FFFFFF; --recall:#E05A48; --tier-p:var(--sage); --tier-o:rgba(143,165,138,.35); --tier-u:rgba(244,239,227,.35);
  --forest-deep:#F4EFE3;
}