/* ==========================================================================
   Light — Exclusive Closet BD
   ==========================================================================

   The shopfront, and the default. It sits over V10 the same way the dark layer
   does, and the dark layer loads after it, so choosing dark overrides this
   rather than fighting it.

   The brief was to make white eye-catching. Cream and metal on their own read as
   tasteful and quiet, which is a different thing from arresting, so three moves
   do the work:

   - The ground gets cleaner and the ink gets darker. Photography of coloured
     silk pops against white far harder than against cream, and near-black
     headings give the page a spine it did not have.
   - One loud thing per view, and it is ink. The accent answers it on hover and stays
     otherwise on hairlines and eyebrows, where it reads as a finish rather than a
     highlight. Two colours, and neither of them competes with the clothes: the
     photographs are the only saturated thing on the page.
   - The product grid becomes tactile. A card that lifts and casts a soft shadow
     under the cursor is the cheapest way to make a catalogue feel expensive.
   ========================================================================== */

html:not(.ecb-dc) { color-scheme: light; }

body.ecb-lt {
	/* Surfaces — cleaner than the cream, so colour in the photographs carries. */
	--v10-page:       #FCFBF9;
	--v10-paper:      #FFFFFF;
	--v10-wash:       #F2F3F5;
	--v10-dark:       #14100E;
	--v10-dark-soft:  #221B16;

	/* Ink — darker across the board. The old muted grey failed on white. */
	--v10-ink:        #14100E;
	--v10-ink-soft:   #453B33;
	--v10-muted:      #7A6D61;

	--v10-rule:       #E2E4E8;

	/* The accent is the logo's own royal blue. It replaced a gold that measured
	   2.38:1 on white — below the readable minimum for the prices and links it
	   was colouring — and reads 11.58:1 here. The lighter step, for hover, is
	   8.18:1. Red is deliberately not used for either: red means "on sale" on
	   this site, and an accent that shares a colour with a discount badge stops
	   the badge meaning anything. */
	--v10-accent:     #0A2C96;
	--v10-accent-hi:  #1740C4;

	/* Ink carries the actions, the blue answers them on hover — two colours the
	   logo already owns, and neither of them competes with the clothes. */
	--ecb-plum:       #1B1512;
	--lt-accent-hover: #1740C4;
	--lt-shadow:      rgba(20, 16, 14, .1);

	/* Healthy stock. Green is the one place on this site that is neither the
	   accent nor the sale red, and it is doing semantic work: plenty vs nearly
	   gone. 7.61:1 on white. */
	--ecb-stock-ok:   #186032;
}

body.ecb-lt {
	background: var(--v10-page);
	color: var(--v10-ink-soft);
}

body.ecb-lt :where(h1, h2, h3, h4, h5, h6) { color: var(--v10-ink); }

/* --------------------------------------------------------------------------
   Header

   A near-black announcement strip gives the page a decisive top edge — the
   first thing a visitor sees is a hard line and an accented figure, not a wash.
   -------------------------------------------------------------------------- */

body.ecb-lt .ecb-v10-header { background: var(--v10-paper); }

body.ecb-lt .ecb-v10-announcement {
	background: var(--v10-dark);
	color: #EFE6D8;
}

body.ecb-lt .ecb-v10-announcement strong,
body.ecb-lt .ecb-v10-announcement b { color: var(--v10-accent-hi); }

body.ecb-lt .ecb-v10-catnav { background: var(--v10-paper); }

body.ecb-lt .ecb-v10-catnav a { color: var(--v10-ink); }

body.ecb-lt .ecb-v10-catnav a:hover,
body.ecb-lt .ecb-v10-catnav .current-menu-item > a { color: var(--v10-accent); }

body.ecb-lt .ecb-v10-brand__words > span { color: var(--v10-ink); }
body.ecb-lt .ecb-v10-brand__words small { color: var(--v10-accent); }

/* --------------------------------------------------------------------------
   Type

   The same lift the dark layer gets: larger, lighter display, and small labels
   tracked out so they read as catalogue captions.
   -------------------------------------------------------------------------- */

body.ecb-lt .ecb-v10-eyebrow,
body.ecb-lt .ecb-eyebrow {
	color: var(--v10-accent);
	font-size: 10px;
	letter-spacing: .3em;
	text-transform: uppercase;
}

body.ecb-lt .ecb-v10-section h2,
body.ecb-lt .ecb-v10-shell > h2 {
	font-family: var(--v10-display);
	font-weight: 300;
	font-size: clamp(38px, 5vw, 68px);
	line-height: 1.02;
	letter-spacing: -.015em;
}

body.ecb-lt .ecb-v10-pagehero h1,
body.ecb-lt .ecb-v9-pagehero__title {
	font-weight: 300;
	font-size: clamp(46px, 6vw, 82px);
	letter-spacing: -.02em;
}

body.ecb-lt.single-product .entry-summary h1.product_title {
	font-weight: 300 !important;
	font-size: clamp(36px, 3.4vw, 54px) !important;
	letter-spacing: -.015em;
}

/* --------------------------------------------------------------------------
   Actions

   Ink, solid, once per view — and the accent when the cursor arrives.
   -------------------------------------------------------------------------- */

body.ecb-lt .ecb-v10-button.is-light {
	background: var(--ecb-plum);
	border-color: var(--ecb-plum);
	color: #FFF;
	transition: background-color 220ms var(--v10-ease), box-shadow 300ms var(--v10-ease);
}

body.ecb-lt .ecb-v10-button.is-light:hover,
body.ecb-lt .ecb-v10-button.is-light:focus-visible {
	background: var(--lt-accent-hover);
	border-color: var(--lt-accent-hover);
	color: #FFF;
	box-shadow: 0 12px 30px rgba(10, 44, 150, .34);
}

body.ecb-lt .ecb-v10-button.is-ghost {
	border-color: rgba(255, 255, 255, .7);
	background: rgba(255, 255, 255, .1);
	color: #FFF;
}

body.ecb-lt .ecb-v10-button.is-ghost:hover,
body.ecb-lt .ecb-v10-button.is-ghost:focus-visible {
	background: #FFF;
	border-color: #FFF;
	color: var(--v10-ink);
}

body.ecb-lt.woocommerce div.product form.cart .single_add_to_cart_button {
	background-color: var(--ecb-plum) !important;
	background-image: none !important;
	border-color: var(--ecb-plum) !important;
	color: #FFF !important;
	letter-spacing: .18em;
	transition: background-color 220ms var(--v10-ease), box-shadow 300ms var(--v10-ease);
}

body.ecb-lt.woocommerce div.product form.cart .single_add_to_cart_button:hover:not(:disabled):not(.disabled),
body.ecb-lt.woocommerce div.product form.cart .single_add_to_cart_button:focus-visible:not(:disabled):not(.disabled) {
	background-color: var(--lt-accent-hover) !important;
	border-color: var(--lt-accent-hover) !important;
	box-shadow: 0 14px 34px rgba(10, 44, 150, .36);
}

body.ecb-lt.woocommerce div.product form.cart .single_add_to_cart_button:disabled,
body.ecb-lt.woocommerce div.product form.cart .single_add_to_cart_button.disabled {
	background-color: transparent !important;
	border-color: var(--v10-rule) !important;
	color: var(--v10-muted) !important;
	box-shadow: none;
}

/* --------------------------------------------------------------------------
   Product grid

   The tactile bit. Nothing moves until the cursor arrives, and then the whole
   card lifts as one object rather than the image scaling inside a static frame.
   -------------------------------------------------------------------------- */

body.ecb-lt .ecb-v10-product {
	transition: transform 320ms var(--v10-ease), box-shadow 320ms var(--v10-ease);
}

body.ecb-lt .ecb-v10-product__media {
	background: var(--v10-wash);
	border: 1px solid var(--v10-rule);
}

body.ecb-lt .ecb-v10-product:hover {
	transform: translateY(-4px);
	box-shadow: 0 22px 44px var(--lt-shadow);
}

body.ecb-lt .ecb-v10-product:hover .ecb-v10-product__media { border-color: var(--v10-accent); }

body.ecb-lt .ecb-v10-product__eyebrow { color: var(--v10-accent); letter-spacing: .24em; }
body.ecb-lt .ecb-v10-product__body h3 a { color: var(--v10-ink); }
body.ecb-lt .ecb-v10-product__body h3 a:hover { color: var(--v10-accent); }
body.ecb-lt .ecb-v10-product__price { color: var(--v10-ink); }
body.ecb-lt .ecb-v10-product__price ins { color: var(--v10-accent); }
body.ecb-lt .ecb-v10-product__price del { color: var(--v10-muted); }

body.ecb-lt .ecb-v10-product__sale,
body.ecb-lt .ecb-off.ecb-price-off {
	background: var(--ecb-plum);
	color: #FFF;
}

body.ecb-lt .ecb-v10-product__view {
	background: rgba(20, 16, 14, .9);
	color: #FFF;
}

@media (prefers-reduced-motion: reduce) {
	body.ecb-lt .ecb-v10-product { transition: none; }
	body.ecb-lt .ecb-v10-product:hover { transform: none; }
}

/* --------------------------------------------------------------------------
   Single product
   -------------------------------------------------------------------------- */

body.ecb-lt.single-product .entry-summary .price,
body.ecb-lt.single-product .entry-summary .woocommerce-Price-amount { color: var(--v10-ink); }

body.ecb-lt.single-product .entry-summary ins .woocommerce-Price-amount { color: var(--ecb-plum); }

body.ecb-lt .variable-item.button-variable-item.selected,
body.ecb-lt .variable-item.button-variable-item[aria-checked="true"] {
	background: var(--v10-ink) !important;
	border-color: var(--v10-ink) !important;
}

body.ecb-lt .variable-item.button-variable-item.selected .variable-item-span,
body.ecb-lt .variable-item.button-variable-item[aria-checked="true"] .variable-item-span { color: #FFF !important; }

body.ecb-lt .variable-item.color-variable-item.selected,
body.ecb-lt .variable-item.color-variable-item[aria-checked="true"] {
	border-color: var(--ecb-plum) !important;
	box-shadow: 0 0 0 2px rgba(10, 44, 150, .45) !important;
}

/* --------------------------------------------------------------------------
   Focus

   Wine, so the keyboard ring is part of the palette rather than a browser blue.
   -------------------------------------------------------------------------- */

body.ecb-lt :where(a, button, input, select, textarea, [tabindex]):focus-visible {
	outline: 2px solid var(--v10-accent);
	outline-offset: 3px;
}

/* --------------------------------------------------------------------------
   Sale

   These once painted the discount in the accent, back when the accent was gold.
   That was superseded by the red block further down, which is where the
   reasoning now lives — a reduction has to interrupt, and the accent is a
   finish rather than an alarm. Kept pointing at the sale token so this block
   agrees with that one instead of quietly contradicting it.
   -------------------------------------------------------------------------- */

body.ecb-lt .ecb-v10-product__sale,
body.ecb-lt .ecb-off.ecb-price-off {
	background: var(--lt-sale) !important;
	color: #FFFFFF !important;
}

body.ecb-lt .ecb-v10-topnav .is-sale { color: var(--lt-sale); }

body.ecb-lt .ecb-v10-product__price ins,
body.ecb-lt .woocommerce ul.products li.product .price ins,
body.ecb-lt.single-product .entry-summary > .price ins { color: var(--v10-accent); }

body.ecb-lt .variable-item.color-variable-item.selected,
body.ecb-lt .variable-item.color-variable-item[aria-checked="true"] {
	border-color: var(--v10-accent) !important;
}

body.ecb-lt .ecb-theme-toggle:hover { color: var(--v10-accent); }

body.ecb-lt .stock.in-stock { color: #2F6B49; }

/* --------------------------------------------------------------------------
   The parent theme's own palette

   Chasing burgundy component by component was never going to finish: Blocksy
   paints links, buttons, badges and every focus accent from `palette-color-1`,
   which the site had set to #4A1834. Repointing the palette itself retires the
   colour from everything the parent theme draws, including the pieces this layer
   has no selector for.
   -------------------------------------------------------------------------- */

body.ecb-lt {
	--theme-palette-color-1:                 #1B1512;
	--theme-link-initial-color:              #1B1512;
	--theme-link-hover-color:                #0A2C96;
	--theme-button-background-initial-color: #1B1512;
	--theme-button-background-hover-color:   #1740C4;
	--theme-button-text-initial-color:       #FFFFFF;
	--theme-button-text-hover-color:         #14100E;
	--ecb-v9-primary:                        #1B1512;
}

body.ecb-lt .ecb-chosen-colour__value { color: var(--v10-accent); }
body.ecb-lt .ecb-heart { color: var(--v10-ink); }
body.ecb-lt .ecb-heart:hover { color: var(--v10-accent); }

/* Saved: the navy accent, not the retired V9 burgundy the base rule reaches
   for. Restated here for two reasons, both of which kept the accent off the
   screen. The colour hung off `.is-on`, a class nothing sets — the button in
   `ecb_wishlist_button()` and `initWishlist` both use `is-saved` — so it never
   matched. And `body.ecb-lt .ecb-heart` above is (0,2,1), which outranks
   `.ecb-heart.is-saved` (0,2,0) in style.css, so a saved heart kept the near
   black ink on the filled disc at 1.4:1 and read as empty. White on the accent
   is 11.6:1. */
body.ecb-lt .ecb-heart.is-saved {
	border-color: var(--v10-accent);
	background: var(--v10-accent);
	color: #FFFFFF;
}

/* --------------------------------------------------------------------------
   The V9 token set

   The burgundy was not scattered through the stylesheet after all — it lived in
   about fifteen `:root` tokens that everything else read. Repointing those is
   the whole job, and it means `style.css` is never edited: the base keeps its
   own definitions and each theme layer supplies its own values over the top.
   -------------------------------------------------------------------------- */

body.ecb-lt {
	--ecb-accent-v9:       #1740C4;
	--ecb-sale:            #E4001E;
	--ecb-border:          rgba(27, 21, 18, .14);
	--ecb-border-strong:   rgba(27, 21, 18, .28);
	--ecb-surface-plum:    #1B1512;
	--ecb-p1-nav:          #453B33;
	--ecb-p1-nav-strong:   #14100E;
	--ecb-p1-nav-hover:    #0A2C96;
	--ecb-p1-eyebrow:      #7A6D61;
	--ecb-p1-link:         #453B33;
	--ecb-p1-hover-wash:   #F4F0E9;
	--ecb-p1-foot:         #14100E;
	--ecb-p1-foot-ink:     #FFF9F4;
	--ecb-p1-foot-muted:   #A79A8C;
	--ecb-p1-foot-link:    #E7E0D5;
	--ecb-p1-foot-head:    #1740C4;
	--ecb-p1-badge:        #1B1512;
}

/* The gallery thumbnail's active frame was the last thing still drawn in the old
   burgundy. Everything else that scans as that colour now is the product itself
   — a colour swatch showing a garment that happens to be plum, which is data
   rather than palette and stays exactly as it is. */
body.ecb-lt .flexy-pills li.active,
body.ecb-lt .flexy-pills li:hover { border-color: var(--v10-accent); }

/* The SALE shortcut and the V9 eyebrow were the last two drawn in the old
   crimson family. SALE keeps its job — it is still the only coloured word in
   the row — and it does it in the sale red, with the weight carrying urgency. */
body.ecb-lt .ecb-v10-topnav .is-sale,
body.ecb-lt .ecb-v10-topnav .is-sale .ct-menu-link,
body.ecb-lt .ecb-v10-topnav .ct-menu-link.is-sale,
body.ecb-lt .menu-item.is-sale > a { color: var(--lt-sale) !important; font-weight: 600; }

body.ecb-lt .ecb-v9-eyebrow { color: var(--v10-accent); }

/* The account dashboard's avatar initial and card icons, the last two literals
   the V9 stylesheet draws outside the token set. */
body.ecb-lt .ecb-v9-account-head__avatar { color: var(--v10-accent); }
body.ecb-lt .ecb-v9-account-card__icon { color: var(--v10-accent); }

/* The badge carries its type on children the base stylesheet colours
   separately, so the rule has to reach them too. White, because the badge is
   red — 4.86:1. */
body.ecb-lt .ecb-v10-product__sale,
body.ecb-lt .ecb-v10-product__sale *,
body.ecb-lt .ecb-off.ecb-price-off,
body.ecb-lt .ecb-off.ecb-price-off *,
body.ecb-lt .onsale,
body.ecb-lt .onsale * { color: #FFFFFF !important; }

/* WooCommerce's own `.onsale` badge was missed by the rule above, so it kept the
   ink ground and then took ink type on top of it — 1.05:1. */
body.ecb-lt .onsale { background: var(--lt-sale) !important; border-color: var(--lt-sale) !important; }

/* This took ink, because the old gold was bright enough that white type on it
   failed. The blue is the opposite case: ink on it measures 2.31:1 and white
   8.18:1, so the rule inverts with the accent. */
body.ecb-lt .ecb-v10-button.is-light:hover,
body.ecb-lt .ecb-v10-button.is-light:focus-visible { color: #FFFFFF; }

body.ecb-lt.woocommerce div.product form.cart .single_add_to_cart_button:hover:not(:disabled):not(.disabled),
body.ecb-lt.woocommerce div.product form.cart .single_add_to_cart_button:focus-visible:not(:disabled):not(.disabled) { color: #FFFFFF !important; }

/* ---------------------------------------------------------------------------
   Sale marks go red

   Gold was the right call for a discount badge in a gold-and-ink shop — right
   aesthetically, and wrong commercially. A price reduction is the one thing on
   a catalogue page that is supposed to interrupt, and gold reads as a finish
   rather than an alarm.

   Red is the only colour here that is not part of the palette, which is exactly
   why it works: nothing else on the page competes with it, so a reduction is
   visible from across the grid. It is used on three things and nothing else —
   the SALE shortcut, the discount badge and the reduced price.
   --------------------------------------------------------------------------- */

body.ecb-lt { --ecb-sale: #E4001E; --lt-sale: #E4001E; }

body.ecb-lt .ecb-v10-product__sale,
body.ecb-lt .ecb-off.ecb-price-off,
body.ecb-lt .onsale {
	background: var(--lt-sale) !important;
	border-color: var(--lt-sale) !important;
}

body.ecb-lt .ecb-v10-product__sale,
body.ecb-lt .ecb-v10-product__sale *,
body.ecb-lt .ecb-off.ecb-price-off,
body.ecb-lt .ecb-off.ecb-price-off *,
body.ecb-lt .onsale,
body.ecb-lt .onsale * { color: #FFFFFF !important; }

body.ecb-lt .ecb-v10-product__price ins,
body.ecb-lt .woocommerce ul.products li.product .price ins,
body.ecb-lt.single-product .entry-summary > .price ins,
body.ecb-lt.single-product .entry-summary ins .woocommerce-Price-amount { color: var(--lt-sale) !important; }

body.ecb-lt .ecb-v10-topnav .is-sale,
body.ecb-lt .ecb-v10-topnav .is-sale .ct-menu-link,
body.ecb-lt .ecb-v10-topnav .ct-menu-link.is-sale,
body.ecb-lt .menu-item.is-sale > a { color: var(--lt-sale) !important; }

/* ---------------------------------------------------------------------------
   Add to cart — outline that fills on hover

   Requested behaviour, exactly: white ground with dark type and a thin border at
   rest, solid black with white type on hover and on keyboard focus.

   The constraint that matters is that nothing may move. The border is on the
   button in both states and never changes width, so the box model is identical
   throughout — only the three paint properties are in the transition, and
   neither padding nor border-width nor font-size is touched. A hover cannot
   reflow the row.

   Scoped to this one control. The quantity field beside it, the stock line above
   it, Buy Now, the WhatsApp and Call buttons and everything in the checkout are
   all left exactly as they were.
   --------------------------------------------------------------------------- */

body.ecb-lt.woocommerce div.product form.cart .single_add_to_cart_button {
	border: 1px solid var(--v10-rule) !important;
	background-color: #FFFFFF !important;
	background-image: none !important;
	color: var(--v10-ink) !important;
	box-shadow: none !important;
	transition: background-color 200ms var(--v10-ease), border-color 200ms var(--v10-ease), color 200ms var(--v10-ease) !important;
}

body.ecb-lt.woocommerce div.product form.cart .single_add_to_cart_button:hover:not(:disabled):not(.disabled),
body.ecb-lt.woocommerce div.product form.cart .single_add_to_cart_button:focus-visible:not(:disabled):not(.disabled),
body.ecb-lt.woocommerce div.product form.cart .single_add_to_cart_button:active:not(:disabled):not(.disabled) {
	border-color: #000000 !important;
	background-color: #000000 !important;
	color: #FFFFFF !important;
	box-shadow: none !important;
}

/* Any icon inside follows the label rather than keeping its own colour. */
body.ecb-lt.woocommerce div.product form.cart .single_add_to_cart_button svg,
body.ecb-lt.woocommerce div.product form.cart .single_add_to_cart_button svg * { fill: currentColor; stroke: currentColor; }

/* Unbuyable is a third state, and must not look like either of the other two. */
body.ecb-lt.woocommerce div.product form.cart .single_add_to_cart_button:disabled,
body.ecb-lt.woocommerce div.product form.cart .single_add_to_cart_button.disabled {
	border-color: var(--v10-rule) !important;
	background-color: transparent !important;
	color: var(--v10-muted) !important;
	box-shadow: none !important;
}

@media (prefers-reduced-motion: reduce) {
	body.ecb-lt.woocommerce div.product form.cart .single_add_to_cart_button { transition: none !important; }
}

/* ---------------------------------------------------------------------------
   The accent, over photography

   The accent this palette replaced was gold — a light value, which is why it
   read against a dark photograph. The logo's navy is a dark value, so in the
   hero it did the opposite: the eyebrow and the script line sank into the image
   while every other word over that photograph stayed white.

   Anything sitting on top of an image therefore takes the light step of the
   blue instead — the same value the dark theme uses on its own dark ground, for
   exactly the same reason. Everything on paper keeps the deep navy.

   The lookbook is deliberately NOT in this list, though it is full of
   photographs: its section head sits on white, above the images rather than on
   them, and lightening it there took that eyebrow to 1.72:1. The test is what
   the text lands on, not what the section contains.
   --------------------------------------------------------------------------- */

body.ecb-lt :is(.ecb-v10-hero, .ecb-v10-pagehero, .ecb-v10-wedding, .ecb-v10-instagram.has-photo) :is(.ecb-v10-eyebrow, .ecb-eyebrow, .ecb-v9-eyebrow),
body.ecb-lt :is(.ecb-v10-hero, .ecb-v10-pagehero, .ecb-v10-wedding, .ecb-v10-instagram.has-photo) :is(h1, h2) em,
body.ecb-lt :is(.ecb-v10-hero, .ecb-v10-pagehero, .ecb-v10-wedding, .ecb-v10-instagram.has-photo) :is(h1, h2) i {
	color: #A9C6FF;
}

/* The headline itself stays white over those photographs, as ecb-v10.css sets
   it. `body.ecb-lt :where(h1…h6)` near the top of this file ties that rule on
   specificity and loads later, so it turned "Six yards," and "Woven for the
   biggest day." the ink colour — readable only while the hero photograph
   happened to have a pale wall on its left, invisible on a dark one (found 17
   Sep 2026 when the HD stock photographs went in). */
body.ecb-lt :is(.ecb-v10-hero__copy, .ecb-v10-wedding) :is(h1, h2) {
	color: #fff;
}

/* ---------------------------------------------------------------------------
   Tokens the layers never claimed

   Two families were still holding values from before this palette existed, and
   because nothing in these stylesheets names them by hand they were invisible
   from inside the layer while being perfectly visible on the page:

   - `--ecb-charcoal` and its twin drive the product short description and the
     attribute table straight from the child theme's own style.css.
   - The focus ring, the text selection and the form-field focus border were all
     still the old burgundy `#4A1834`.

   Repointing them here keeps style.css untouched, which is how every earlier
   colour change on this site has been done.
   --------------------------------------------------------------------------- */

body.ecb-lt {
	--ecb-charcoal:                            #14100E;
	--ecb-cc-charcoal:                         #14100E;
	--ecb-focus-ring:                          #0A2C96;
	--theme-selection-background-color:        #0A2C96;
	--theme-form-field-border-focus-color:     #0A2C96;
	--theme-form-selection-field-active-color: #0A2C96;
	--wp--preset--color--palette-color-1:      #0A2C96;
}

/* The same mauve, on paper. It passes on white, but it is a burgundy-era grey
   and reads warm against the blue; neutralised to sit with the accent. */
body.ecb-lt {
	--ecb-muted:    #6E6E75;
	--ecb-cc-muted: #6E6E75;
}

/* ---------------------------------------------------------------------------
   The dark bands inside the light theme

   The announcement strip and the footer are near-black in this theme too, so
   they are dark surfaces sitting in a light page — and the accent is a dark
   value. Measured on them, `--v10-accent-hi` came out at 2.31:1 and the footer
   headings at 1:1, ink on ink, invisible rather than merely dim.

   Rather than restate every component, the accent tokens are redefined for the
   span of those two bands, so anything inside them picks up the light step the
   dark theme uses — the same move the hero needed, for the same reason.
   --------------------------------------------------------------------------- */

body.ecb-lt .ecb-v10-announcement,
body.ecb-lt .ecb-v10-trending,
body.ecb-lt .ecb-v10-footer {
	--v10-accent:    #A9C6FF;
	--v10-accent-hi: #A9C6FF;
}

/* Headings in the footer are reached by the layer's own `:where()` heading rule,
   which sets page ink; on this ground that is the 1:1 case. */
body.ecb-lt .ecb-v10-footer :is(h1, h2, h3, h4, h5, h6) { color: #A9C6FF; }

/* The base layer sets this line as a literal. */
body.ecb-lt .ecb-v10-footer__bottom > div { color: #A79A8C; }

/* ---------------------------------------------------------------------------
   ECB Commerce Core's own tokens

   The plugin declares `--ecb-cc-*` on :root as `var(--ecb-*, <old fallback>)`.
   A custom property containing var() is substituted where it is DECLARED, so
   those resolve once against :root and are then inherited as plain values —
   overriding the upstream `--ecb-*` on body never reaches them. They have to be
   set directly, which is why the bKash panel kept its burgundy and gold while
   the rest of the site had moved on.

   `--ecb-gold` is restored as well: the plugin still reads it, and renaming it
   to `--ecb-accent-v9` left `var(--ecb-gold, #C5A060)` falling through to the
   old gold — which is exactly what surfaced on the payment panel.
   --------------------------------------------------------------------------- */

body.ecb-lt {
	--ecb-gold:        #0A2C96;
	--ecb-cc-plum:     #1B1512;
	--ecb-cc-gold:     #0A2C96;
	--ecb-cc-line:     rgba(20, 16, 14, .14);
	--ecb-cc-border:   rgba(20, 16, 14, .14);
}


/* ---------------------------------------------------------------------------
   The authentication panels

   Same fault as the announcement, trending and footer bands above, and it was
   missed for the same reason: `.ecb-v10-auth-intro` and `.ecb-v10-lost-intro`
   are dark cards standing on a photograph, inside a light page.

   Two rules in this layer reach into them. The eyebrow rule carries a class of
   its own, so it simply wins and paints the caption in the page accent — a dark
   navy that measured 1.6:1 on the near-black card. The heading rule looks like
   it should lose, but `body.ecb-lt :where(h1 … h6)` is (0,1,1): `body` a type,
   `.ecb-lt` a class, and `:where()` nothing. `.ecb-v10-lost-intro h1` is also
   (0,1,1) — a tie, decided by order, and this sheet loads last. "Reset your
   password" was rendering in page ink on the dark card: legible only as a
   silhouette, on the one screen a locked-out customer has to read.

   Tokens redefined for the span of the two cards, as above, plus the heading
   restated so the tie is broken here rather than left to file order.
   --------------------------------------------------------------------------- */

/* The form panels below the cards are the same dark ground and the same case:
   the EMAIL & PASSWORD chip and the switch links were reading the page accent
   at 2.3:1 on it. Whole sheet of paper, one token. */
body.ecb-lt .ecb-v10-auth-intro,
body.ecb-lt .ecb-v10-lost-intro,
body.ecb-lt #customer_login,
body.ecb-lt .ecb-otp,
body.ecb-lt form.lost_reset_password {
	--v10-accent:    #A9C6FF;
	--v10-accent-hi: #A9C6FF;
}

body.ecb-lt :is(.ecb-v10-auth-intro, .ecb-v10-lost-intro, #customer_login) :is(h1, h2, h3) { color: #fff; }
body.ecb-lt :is(.ecb-v10-auth-intro, .ecb-v10-lost-intro) .ecb-v10-eyebrow { color: #A9C6FF; }