/*
 * Mashin Irani — sitewide re-theme (navy+gold+ivory → orange+goldenrod+cool-grey).
 *
 * The whole site binds to design tokens (--mi-color-* in tokens.css and the short aliases --navy-*,
 * --gold-*, --bg-*, … in mi.css / pages/*.css). CSS custom properties resolve at USE time, so
 * redefining the PRIMITIVES here — in a :root that loads AFTER every token sheet — recolours every
 * semantic role (text, buttons, badges, borders, backgrounds, sections) across the theme, the pages,
 * the header/footer and the sandbox components, with no markup changes.
 *
 * Navy had a dual role (dark text + brand/button fill). The new palette splits it: navy-900 → near-black
 * (text + dark surfaces like the footer), navy-800 → orange (brand-primary / action-buy / buttons).
 *
 * New palette (from the homepage redesign):
 *   primary #D6431A (hover #B93712) · accent #B8860B · bg #F7F8FA · surface #fff · sunken #F1F2F5
 *   border #E3E6EB · text #1A1D22 · text-2 #667085 · success #1F8A5C
 */

:root {
	/* ---- primitives: --mi-color-* (tokens.css) ---- */
	--mi-color-navy-900: #1A1D22;   /* text-primary + dark surfaces (footer) */
	--mi-color-navy-800: #D6431A;   /* brand-primary / action-buy → orange   */
	--mi-color-navy-700: #B93712;   /* darker orange (button hover)          */
	--mi-color-slate-600: #667085;  /* text-secondary                        */
	--mi-color-sapphire-500: #D6431A; /* links → orange                      */
	--mi-color-gold-500: #B8860B;   /* brand-accent → goldenrod              */
	--mi-color-gold-300: #DFAE45;   /* light goldenrod (accents on dark)     */
	--mi-color-accessible-gold: #9C780B; /* gold text on light (readable)    */
	--mi-color-ivory-50: #F7F8FA;   /* bg-base → cool light grey             */
	--mi-color-sand-200: #E3E6EB;   /* border                                */
	--mi-color-clay-error: #C0392B;
	--mi-color-signal-success: #1F8A5C;
	--mi-color-signal-warning: #C58A2E;
	--mi-color-white-pure: #fff;
	--mi-color-n-100: #F1F2F5;      /* bg-sunken                             */
	--mi-color-n-300: #D3D8DF;      /* border-strong                         */
	--mi-color-n-500: #8B93A1;      /* text-tertiary                         */
	--mi-color-n-700: #2A2F38;
	--mi-color-n-800: #1A1D22;

	/* semantic pins (redundant with the primitives above, but explicit) */
	--mi-color-bg-base: #F7F8FA;
	--mi-color-bg-elevated: #FFFFFF;
	--mi-color-bg-sunken: #F1F2F5;
	--mi-color-text-primary: #1A1D22;
	--mi-color-text-secondary: #667085;
	--mi-color-text-tertiary: #8B93A1;
	--mi-color-text-on-dark: #F4F5F6;
	--mi-color-text-gold: #9C780B;
	--mi-color-brand-primary: #D6431A;
	--mi-color-brand-accent: #B8860B;
	--mi-color-action-lead-magnet: #B8860B;
	--mi-color-action-buy: #D6431A;
	--mi-color-link: #D6431A;
	--mi-color-border: #E3E6EB;
	--mi-color-border-strong: #D3D8DF;

	/* neutral (cool) shadow tint instead of navy */
	--mi-shadow-e1: 0 1px 2px rgba(20, 20, 30, .05);
	--mi-shadow-e2: 0 4px 12px rgba(20, 20, 30, .07);
	--mi-shadow-e3: 0 8px 24px rgba(20, 20, 30, .09);
	--mi-shadow-e4: 0 16px 40px rgba(20, 20, 30, .12);
	--mi-shadow-e5: 0 24px 64px rgba(20, 20, 30, .16);

	/* ---- short aliases: mi.css / pages/home.css / pages/product.css ---- */
	--navy-900: #1A1D22;
	--navy-800: #D6431A;
	--navy-700: #B93712;
	--slate-600: #667085;
	--sapphire-500: #D6431A;
	--gold-500: #B8860B;
	--gold-300: #DFAE45;
	--accessible-gold: #9C780B;
	--ivory-50: #F7F8FA;
	--sand-200: #E3E6EB;
	--clay-error: #C0392B;
	--success: #1F8A5C;
	--warning: #C58A2E;
	--white: #fff;
	--n-100: #F1F2F5;
	--n-300: #D3D8DF;
	--n-500: #8B93A1;
	--n-700: #2A2F38;
	--n-800: #1A1D22;

	--bg-base: #F7F8FA;
	--bg-elevated: #FFFFFF;
	--bg-sunken: #F1F2F5;
	--text-primary: #1A1D22;
	--text-secondary: #667085;
	--text-tertiary: #8B93A1;
	--text-on-dark: #F4F5F6;
	--brand-primary: #D6431A;
	--brand-accent: #B8860B;
	--action-lead-magnet: #B8860B;
	--action-buy: #D6431A;
	--link: #D6431A;
	--gold-text: #9C780B;
	--border: #E3E6EB;
	--border-strong: #D3D8DF;

	--shadow-e1: 0 1px 2px rgba(20, 20, 30, .05);
	--shadow-e2: 0 4px 12px rgba(20, 20, 30, .07);
	--shadow-e3: 0 8px 24px rgba(20, 20, 30, .09);
	--shadow-e4: 0 16px 40px rgba(20, 20, 30, .12);
	--shadow-e5: 0 24px 64px rgba(20, 20, 30, .16);
}

/*
 * A few high-visibility spots use LITERAL navy/gold hex (not tokens) and can't be reached by the
 * variables above — patch the prominent ones so the rebrand looks complete.
 */

/* wholesale tier-table dots (parts/wholesale.php inline #b08d57 / #9aa7b5) */
.tier .tname .dot[style*="b08d57"] { background: #C08A2E !important; }
.tier .tname .dot[style*="9aa7b5"] { background: #98A0AC !important; }

/*
 * Buy-button hover reverted to a LITERAL navy hex (#0c1b3f in home.css/product.css) that no token
 * could reach — restore the orange hover after the re-theme.
 */
.btn-buy:hover { background: var(--navy-700); }

/*
 * Product cards: pure-white card body, solid red/orange add-to-cart button (per request).
 * (The card background was already --bg-elevated=#fff; pinned here so it stays white regardless.)
 */
.prod { background: #fff; }

/*
 * Flash-deal cards → white (per the inspector edit), replacing the original dark-navy treatment that
 * the re-theme had turned orange. That treatment coloured the title/price/media/strike LIGHT (for a
 * dark card), so they are re-pointed to the light-card colours here — otherwise they'd be invisible
 * on white.
 */
.flash .prod {
	background: #ffffff;
	border-color: rgba(224, 197, 143, .18);
}
.flash .prod h3,
.flash .prod h3 a { color: var(--text-primary); }
.flash .prod .price { color: var(--text-primary); }
.flash .prod .strike,
.flash .prod .soldnote { color: var(--text-tertiary); }
.flash .prod .media { background: linear-gradient(160deg, #fbf8f3, var(--n-100)); }
.flash .prod .progress { background: var(--n-100); }