/* ==========================================================================
Legacy aliases: old custom-property names -> new design tokens
Lets pages that still use shop/css/styles.css (and admin.css) adopt the new
tokens gradually, before their markup is migrated to components.css.
Load order on an old page (this file must come AFTER styles.css):
Stages (opt in step by step, then delete this file once no page needs it):
1. :root colours + fonts (safe, recommended)
2. radii + shadows (flattens old cards/buttons)
3. admin.css palette (admin.html only)
combine: data-egh-legacy="shape admin"
4. html.egh-has-header set by js/partials/header.js when the new
shared header is mounted: --nav-offset
5. (always) keeps styles.css element rules (nav, footer)
away from the shared header and footer
The list below covers every custom property that shop/css/styles.css defines
or reads (grep "var(--" css/styles.css), plus --bg-warm, which styles.css reads
but never defined.
========================================================================== */
/* ---- Stage 1: colours + fonts (styles.css) ---- */
:root{
--bg:var(--color-bg); /* was #f5f4f0 */
--white:var(--color-surface); /* was #ffffff */
--surface:var(--color-surface-sunken); /* was #eeece7 (filled wells) */
--border:var(--color-border); /* was #dddbd4 */
--border-light:var(--color-border); /* was #e8e6e0 */
--yellow:var(--color-brand); /* was #f0b429 */
--yellow-hover:var(--color-brand-hover); /* was #f5c020 */
--yellow-dark:var(--color-brand-active); /* was #c98a00 (icons, hover fills) */
--yellow-light:var(--color-brand-tint); /* was #fff8e6 */
--yellow-border:var(--color-brand-line); /* was #ffe08a */
--warm-bg:var(--color-brand-tint); /* was #fff8e6 */
--warm-text:var(--color-warning-ink); /* was #a06000 */
--bg-warm:var(--color-surface-sunken); /* read by styles.css, never defined before */
--black:var(--color-ink); /* was #16140f */
--dark:var(--color-graphite-800); /* was #2a2820 */
--text:var(--color-text); /* was #3d3a30 (unchanged) */
--muted:var(--color-muted); /* was #6b6759 (unchanged) */
--muted-light:var(--color-muted); /* was #b5b2a9 = 2.1:1, used for text: raised to AA */
--green:var(--color-success); /* was #2d9e5f */
--green-light:var(--color-success-tint); /* was #eaf7f0 */
--blue:var(--color-info); /* was #2563eb */
--blue-light:var(--color-info-tint); /* was #eff6ff */
--red:var(--color-danger); /* was #e53e3e */
--red-light:var(--color-danger-tint); /* was #fee */
/* --font-sans / --font-mono: same names and stacks in tokens.css, nothing to alias */
}
/* ---- Stage 2: shape (radii + shadows) ---- */
:root[data-egh-legacy~="shape"]{
--radius:var(--radius-4); /* was 14px */
--radius-sm:var(--radius-4); /* was 8px */
--radius-lg:var(--radius-8); /* was 20px */
--shadow-sm:0 0 0 transparent; /* was a card shadow: B uses 1px borders instead */
--shadow:0 0 0 transparent; /* was a hover lift */
--shadow-lg:var(--shadow-overlay); /* overlays keep their shadow */
}
/* ---- Stage 3: admin.css palette (admin.html only) ---- */
:root[data-egh-legacy~="admin"]{
--brand:var(--color-brand);
--brand-dim:var(--color-brand-hover);
--brand-glow:var(--color-brand-tint);
--brand-ink:var(--color-on-brand);
--brand-subtle:var(--color-brand-tint);
--bg-main:var(--color-bg);
--bg-card:var(--color-surface);
--bg-card-hover:var(--color-surface-hover);
--bg-input:var(--color-surface);
--bg-elevated:var(--color-surface);
--bg-secondary:var(--color-surface-sunken);
--bg-modal-overlay:var(--color-scrim);
--border:var(--color-border);
--border-subtle:var(--color-border);
--text-primary:var(--color-ink);
--text-secondary:var(--color-text);
--text-tertiary:var(--color-muted); /* was #8b90a0 = 3.3:1: raised to AA */
--text-inverse:var(--color-on-dark);
--success:var(--color-success); --success-bg:var(--color-success-tint);
--warning:var(--color-warning); --warning-bg:var(--color-warning-tint);
--danger:var(--color-danger); --danger-bg:var(--color-danger-tint);
--info:var(--color-info); --info-bg:var(--color-info-tint);
--purple:var(--color-info); --purple-bg:var(--color-info-tint); /* restrained palette: no purple */
--yellow:var(--color-brand); --yellow-light:var(--color-brand-tint);
--font:var(--font-sans); /* was 'Plus Jakarta Sans' (never loaded) */
--mono:var(--font-mono);
}
:root[data-egh-legacy~="admin"][data-egh-legacy~="shape"]{
--r-xs:var(--radius-2); --r-sm:var(--radius-4); --r-md:var(--radius-4);
--r-lg:var(--radius-8); --r-xl:var(--radius-8);
--sh-xs:0 0 0 transparent; --sh-sm:0 0 0 transparent; --sh-card:0 0 0 transparent;
--sh-card-hover:0 0 0 transparent; --sh-md:var(--shadow-overlay); --sh-lg:var(--shadow-overlay);
}
/* ---- Stage 4: offset for anchors / sticky elements under the new shared header ---- */
:root.egh-has-header{--nav-offset:calc(var(--header-row-1) + var(--header-row-2))}
@media (max-width:767px){:root.egh-has-header{--nav-offset:var(--header-m-search)}}
/* ---- Stage 5: shared header/footer on a page whose body still uses styles.css ----
styles.css styles the bare elements nav, footer and * (reset). Those rules must not
reach the shared chrome: the old global "nav {position:sticky; top:0; background:white}"
made the breadcrumb sticky while the main navigation scrolled away (audit bug), and
"footer {background:white; padding:60px 0 0}" would repaint the graphite footer. */
.site-header nav,.site-header .hdr-nav{position:static;z-index:auto;backdrop-filter:none;-webkit-backdrop-filter:none;border-bottom:0;box-shadow:none}
.site-header .hdr-nav{background:var(--color-graphite-800)}
.site-footer,.co-header{border-top:0;padding:0;box-shadow:none}
.site-footer ul{margin:0;padding:0;list-style:none}
.site-header .search__input,.site-header button,.site-footer button{font-family:var(--font-sans)}
:root.egh-has-header nav.breadcrumb{position:static;top:auto;z-index:auto;backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:none;background:transparent;border-bottom:0}
/* the scroll-in animation of styles.css (.fade-in until main.js added .show) is decorative
motion the redesign removed: content is simply visible */
.fade-in{opacity:1;transform:none;transition:none}