/* ═══════════════════════════════════════════════════════════════════════════
   Atelier — dark mode.

   This is a COLOUR scheme, not a layout. It is loaded on every page and does
   nothing until `atelier-dark` lands on <html>, which is why the toggle can
   flip it instantly with no request and no reload.

   Keep the split honest:
     * a rule that only changes colour belongs here;
     * a rule that moves, hides or restructures anything belongs in the
       variation's own sheet (noir-layout.css).

   Flipping a colour toggle must never reflow the page. A visitor who clicks
   the moon expects the same page in the dark, not a different page.

   Scoped `html.atelier-dark` (0,1,1) so the token block outranks the `:root`
   (0,1,0) block in global.css on specificity rather than on load order.
   ═══════════════════════════════════════════════════════════════════════════ */

html.atelier-dark {
    /* Warm near-black, not neutral grey. The light palette is warm, and a
       neutral dark ground under warm artwork reads as a colour cast. */
    --at-canvas: #14120f;
    --at-panel:  #1c1916;
    --at-band:   #221e19;
    --at-ink:    #f3ede4;
    --at-muted:  #b2a89a;
    --at-faint:  #7e7466;
    --at-rule:   #332d26;
    --at-accent: #b99764;
    --at-on-accent: #17140f;
    --at-gilt:   #cdab74;
    --at-blush:  #3a3129;

    --at-shadow-soft: 0 18px 48px rgba(0, 0, 0, 0.5);
    --at-shadow-lift: 0 28px 70px rgba(0, 0, 0, 0.62);
    --at-scrim: rgba(8, 7, 6, 0.6);

    color-scheme: dark;
}

/* Tell the browser to draw its own furniture — scrollbars, form controls,
   the space beyond the page — in the matching scheme. */
html.atelier-light { color-scheme: light; }

/* ── Buttons ───────────────────────────────────────────────────────────── */
/* Primary is gilt-on-dark here, so hover goes PALER. Going darker, which is
   what the light palette does, is invisible against this ground. */
html.atelier-dark .at-btn-primary:hover {
    background: #e0c491;
    border-color: #e0c491;
    color: #17140f;
}

html.atelier-dark .at-btn-ghost { border-color: #4a423a; }
html.atelier-dark .at-btn-ghost:hover {
    background: #f3ede4;
    border-color: #f3ede4;
    color: #17140f;
}

/* ── Artwork ───────────────────────────────────────────────────────────── */
/* Paintings photographed for a light page sit a touch hot on near-black. A
   small contrast lift settles them into the ground without touching hue —
   never a filter that shifts colour, on a site whose subject is colour. */
html.atelier-dark .at-frame img { filter: brightness(0.94) contrast(1.04); }
html.atelier-dark .at-card:hover .at-frame img,
html.atelier-dark a:hover > .at-frame img { filter: none; }

/* A card reads as a raised object on a light ground and as a hole punched in
   the page on a dark one. Swap the drop shadow for a lit edge. */
html.atelier-dark .at-card,
html.atelier-dark .at-panel {
    border: 1px solid #262220;
    box-shadow: none;
}

/* ── Header ────────────────────────────────────────────────────────────── */
/* nav.css hardcodes the light canvas in this rgba() because a var() cannot be
   interpolated into one. It has to be restated. */
html.atelier-dark .at-header.is-stuck {
    background: rgba(20, 18, 15, 0.92);
    border-bottom-color: #2a2521;
}

/* ── Accents that were hardcoded for a light ground ────────────────────── */
/* White on gilt is only ~2.4:1. On the dark scheme the plate is the brightest
   thing in the header, so the count goes dark instead. */
html.atelier-dark .at-cart-count { color: #17140f; }
html.atelier-dark .at-badge-reserved { color: #17140f; }

/* The sage blot in the medium row is a fixed pastel. At 0.55
   opacity on near-black it turns to mud, so it gets its own dark value. */
html.atelier-dark .at-medium:nth-child(3) .at-medium-blot::before {
    background: #2e3a2c;
}
/* The washes are tinted glass over a light ground; over a dark one they need
   more presence or they vanish entirely. */
html.atelier-dark .at-medium-blot::before { opacity: 0.8; }
html.atelier-dark .at-medium:hover .at-medium-blot::before { opacity: 1; }

/* The blurred blobs behind the hero stack and the studio photo. These are a
   pale wash on cream and a LIGHTER-than-ground lift on near-black, so the same
   opacity that reads as a whisper in light mode reads as a smudge here. Down,
   not up — the instinct to raise opacity on a dark ground is wrong when the
   element is lighter than what it sits on. */
html.atelier-dark .at-hero-stack::before,
html.atelier-dark .at-about-strip .at-photo::before,
html.atelier-dark .at-about-portrait::before { opacity: 0.4; }

/* ── Forms ─────────────────────────────────────────────────────────────── */
/* A bordered box on near-black reads as a gap in the page rather than a field.
   Fill the well. */
html.atelier-dark .at-input,
html.atelier-dark .at-textarea,
html.atelier-dark .at-select,
html.atelier-dark .comment-form input[type='text'],
html.atelier-dark .comment-form input[type='email'],
html.atelier-dark .comment-form input[type='url'],
html.atelier-dark .comment-form textarea {
    background: #1a1714;
    border-color: #35302a;
    color: #f3ede4;
}
html.atelier-dark .at-input:focus,
html.atelier-dark .at-textarea:focus,
html.atelier-dark .at-select:focus { border-color: #cdab74; }

/* ── Misc ──────────────────────────────────────────────────────────────── */
html.atelier-dark ::selection { background: #cdab74; color: #17140f; }
html.atelier-dark .at-notice-bad { border-left-color: #d4705c; }

/* ── The toggle itself ─────────────────────────────────────────────────── */
/* Both glyphs ship in the markup so the swap costs no request and no reflow.
   Which one is visible is the only thing that changes. */
.at-theme-toggle .at-icon-moon { display: block; }
.at-theme-toggle .at-icon-sun  { display: none; }
html.atelier-dark .at-theme-toggle .at-icon-moon { display: none; }
html.atelier-dark .at-theme-toggle .at-icon-sun  { display: block; }

/* ── WooCommerce ───────────────────────────────────────────────────────── */
/* Most of assets/css/shop/woocommerce.css is token-driven and needs nothing
   here. These are the places WooCommerce hardcodes a light surface, so a token
   never reaches them. */
html.atelier-dark .woocommerce table.shop_table,
html.atelier-dark .wc-block-cart-items,
html.atelier-dark .wc-block-components-panel {
    background: transparent;
    color: var(--at-ink, #f3ede4);
}

html.atelier-dark .woocommerce-message,
html.atelier-dark .woocommerce-info,
html.atelier-dark .wc-block-components-notice-banner {
    background: #221e19;
    color: #f3ede4;
}

html.atelier-dark .wc-block-components-sidebar,
html.atelier-dark .wc-block-components-order-summary {
    background: #1c1916;
}

/* WooCommerce paints its own chip and radio backgrounds white. */
html.atelier-dark .wc-block-components-radio-control__option,
html.atelier-dark .wc-block-components-shipping-rates-control__package {
    background: #1a1714;
    border-color: #35302a;
}

/* Product images on a print listing get the same settling as gallery art. */
html.atelier-dark .woocommerce ul.products li.product img { filter: brightness(0.94) contrast(1.04); }

/* The payment box and its ID-level greys, restated for the dark scheme. */
html.atelier-dark body.woocommerce-checkout #payment,
html.atelier-dark body.woocommerce-checkout .woocommerce-checkout-payment { background: #221e19; }
html.atelier-dark body.woocommerce-checkout #payment div.payment_box { background: #1a1714; color: #b2a89a; }
html.atelier-dark body.woocommerce-checkout #payment div.payment_box::before { border-bottom-color: #1a1714; }
html.atelier-dark body.woocommerce-page a.remove { color: #7e7466 !important; }

/* WooCommerce's fields use .input-text, not this theme's .at-input, so the
   dark form rules above miss them entirely. Left alone they fall through to the
   browser default, which under `color-scheme: dark` is a blue-grey well that
   belongs to no palette on this site. */
html.atelier-dark body.woocommerce-page input.input-text,
html.atelier-dark body.woocommerce-page .form-row input.input-text,
html.atelier-dark body.woocommerce-page .form-row textarea,
html.atelier-dark body.woocommerce-page .form-row select,
html.atelier-dark body.woocommerce-page input[type="email"],
html.atelier-dark body.woocommerce-page input[type="tel"],
html.atelier-dark body.woocommerce-page input[type="password"],
html.atelier-dark body.woocommerce-page .select2-selection {
    background: #1a1714;
    border-color: #35302a;
    color: #f3ede4;
}
html.atelier-dark body.woocommerce-page input.input-text::placeholder,
html.atelier-dark body.woocommerce-page .form-row textarea::placeholder { color: #7e7466; }

html.atelier-dark body.woocommerce-page input.input-text:focus,
html.atelier-dark body.woocommerce-page input[type="email"]:focus,
html.atelier-dark body.woocommerce-page .form-row textarea:focus { border-color: #cdab74; }

/* The inline variation selector on a piece page. */
html.atelier-dark .at-variations select,
html.atelier-dark .at-variations .quantity input.qty {
    background: #1a1714;
    border-color: #35302a;
    color: #f3ede4;
}
html.atelier-dark .at-variations select:focus { border-color: #cdab74; }

/* The "View cart" link inside a WooCommerce block notice. Its colour is set
   with !important in the plugin's own stylesheet, so it survives every
   token-driven rule above and lands as near-black text on the dark band. This
   is the one place in this file that has to answer !important with !important. */
html.atelier-dark .wc-block-components-notice-banner > .wc-block-components-notice-banner__content .wc-forward {
    color: #e9e0d2 !important;
    opacity: 0.85;
}
html.atelier-dark .wc-block-components-notice-banner > .wc-block-components-button { color: #b2a89a !important; }

/* The shop page band. The wash sits behind a scrim built from --at-band, so it
   follows the palette on its own; what does not follow is the photograph, which
   was chosen to read on cream and is too bright against a dark page. */
html.atelier-dark .at-shop-head::before { opacity: 0.32; filter: blur(30px) saturate(0.9); }

/* The summary card and the coupon disclosure sit on --at-panel, which dark mode
   already darkens. Only the checkout's floated line-item thumbnail needs a hand:
   a white 1px border around a photograph on a dark card reads as a cut-out. */
html.atelier-dark .at-review-thumb,
html.atelier-dark body.woocommerce-cart table.cart td.product-thumbnail img { border-color: #2b2621; }