/* GRAY · giftcard flow — LIGHT theme
   ---------------------------------------------------------------------------
   This file is loaded AFTER each page's inline <style>, so it only re-points
   the design tokens and patches the handful of places where a colour was
   hard-coded. The markup of the flow is identical to /giftcard-gift-flow.
   --------------------------------------------------------------------------- */

:root{
  --bg:#fdefe7;                    /* cream page + header */
  --card:#ffffff;
  --card-border:rgba(32,32,32,.14);
  --terms:#f4e7dc;
  --cream:#202020;                 /* the "ink" token: body text, borders, rules */
  --chip:#ffffff;
  --chip-text:#202020;
  --muted:#8a8a8a;
  --field-place:#9b9694;
  /* the gift-card art stays dark — it's the product, not the page */
  --gift-bg:#191919;
  --gift-border:#2c2c2c;
}

/* page grain: the texture is white, so flip it to dark specks on cream */
.page::before{ filter:invert(1); opacity:.22; }
.header{ box-shadow:0 1px 0 rgba(32,32,32,.10); }

/* Secondary buttons used the cream token as a BACKGROUND, which reads as a heavy
   dark slab on a light page. In light mode they become white pills with an ink
   label and a hairline, and pick up the purple border on hover like every other
   bordered pill on the site. */
.btn-back, .btn-ico, .btn-cream, .m-cancel{
  background:#ffffff; color:#202020;
  box-shadow:inset 0 0 0 1px rgba(32,32,32,.18);
}
.btn-back:hover, .btn-ico:hover, .btn-cream:hover, .m-cancel:hover{
  filter:none; box-shadow:inset 0 0 0 2px var(--accent);
}
/* the confirmation buttons are square-cornered blocks, keep them so */
.btn-ico svg, .btn-cream svg{ color:currentColor; }

/* text sitting on the purple accent */
.cta, .btn-purple, .btn-buy, .chip.selected, .m-ok{ color:#fdefe7; }
.chip{ box-shadow:inset 0 0 0 1px rgba(32,32,32,.14); }
.chip.selected{ box-shadow:none; }
.check.checked .cbox::after{ border-color:#fdefe7; }

/* the gift-card art stayed dark, so its label stays light */
.giftcard{ color:#fdefe7; }

/* modal scrim: the dark-theme 60% black turns the cream page muddy */
.overlay{ background:rgba(32,32,32,.32); }

/* hairlines + placeholders that were hard-coded in cream */
.d-row{ border-bottom-color:rgba(32,32,32,.12); }
.ta-count{ color:rgba(32,32,32,.35); }
.other-amt::placeholder{ color:rgba(32,32,32,.45); }