/* A little soft clay for actions; quiet surfaces for products and prices. */
:root,html[data-theme="apricot"]{--clay-hero-rgb:54,36,60;--clay-accent-rgb:255,183,154}
html[data-theme="cobalt"]{--clay-hero-rgb:27,47,87;--clay-accent-rgb:181,210,255}
html[data-theme="sage"]{--clay-hero-rgb:29,60,49;--clay-accent-rgb:188,227,199}
html[data-theme="lime"]{--clay-hero-rgb:35,40,30;--clay-accent-rgb:220,247,104}

/* The single colored glow stays inside the hero, behind the smile. */
.home-view .hero-wallet,.comparison-summary{
 background:radial-gradient(ellipse at 100% 0,rgba(var(--clay-accent-rgb),.15),transparent 60%),linear-gradient(145deg,#ffffff06,#00000012),var(--hero);
 box-shadow:inset 0 1px 0 #ffffff20,inset 0 -3px 7px #00000015,0 13px 28px -20px rgba(var(--clay-hero-rgb),.5);
}
.hero-wallet:after{opacity:.4}
.wallet-sticker{
 background:radial-gradient(ellipse at 28% 16%,#ffffff75,transparent 66%),var(--accent);
 border-radius:35%;
 box-shadow:inset 2px 3px 5px #ffffff75,inset -4px -6px 9px rgba(var(--clay-hero-rgb),.17),0 9px 16px #00000036;
}
.wallet-sticker svg{filter:drop-shadow(0 1px 0 #ffffff40)}
.wallet-bottom .wallet-arrow{
 background:linear-gradient(145deg,#ffffff45,transparent 65%),var(--accent);
 color:var(--ink);
 box-shadow:inset 1px 1px 2px #ffffff60,inset -2px -3px 5px rgba(var(--clay-hero-rgb),.14),0 3px 6px #00000014;
}

/* Tactile, dark buttons retain the palette's established contrast. */
.home-view .home-camera,.tickets-view .home-camera,.button.primary,
.home-view .home-draft-button,.tickets-open,.topbar .scan-header,
.shopping-layout-tabs button[aria-pressed="true"],.topbar .nav.active{
 background:linear-gradient(145deg,#ffffff19,transparent 55%),var(--hero);
 box-shadow:inset 0 2px 2px #ffffff26,inset 0 -3px 5px #0000002b,0 5px 10px -5px rgba(var(--clay-hero-rgb),.35);
}
.home-view .home-camera:hover,.tickets-view .home-camera:hover,.button.primary:hover,
.home-view .home-draft-button:hover,.tickets-open:hover{
 background:linear-gradient(145deg,#ffffff21,transparent 60%),var(--hero);
}

/* Small controls get a rounded edge without adding width or padding. */
.area-trigger,.appearance-trigger,.header-history,.modal-head .icon-button{
 background:linear-gradient(145deg,#ffffff9c,transparent 74%),var(--cream);
 box-shadow:inset 1px 1px 2px #ffffffbf,inset -1px -2px 3px rgba(var(--clay-hero-rgb),.045),0 3px 7px -5px rgba(var(--clay-hero-rgb),.28);
}
.home-receipt-icon,.home-area-icon,.tickets-item-icon,.area-store-mark{
 background:linear-gradient(145deg,#ffffff73,transparent 72%),var(--soft);
 box-shadow:inset 1px 2px 3px #ffffffa6,inset -2px -3px 5px rgba(var(--clay-hero-rgb),.07),0 4px 7px -5px rgba(var(--clay-hero-rgb),.22);
}
.home-view .home-draft{
 background:linear-gradient(145deg,#ffffff40,transparent 75%),var(--accent-soft);
 box-shadow:inset 1px 1px 2px #ffffffb3,inset -1px -2px 4px rgba(var(--clay-hero-rgb),.035);
}
.store-list-brand>span{
 background:linear-gradient(145deg,#ffffff1f,transparent 65%),var(--hero);
 box-shadow:inset 1px 1px 2px #ffffff26,inset -2px -3px 4px #00000026,0 3px 6px -3px rgba(var(--clay-hero-rgb),.25);
}
.photo-comparison.coop-product,.habits-view .simple-list-item,.store-list,.replacement-card{
 box-shadow:inset 0 1px 0 #ffffffd9,0 6px 16px -12px rgba(var(--clay-hero-rgb),.22);
}
.store-list>header{background:linear-gradient(145deg,#ffffff5c,transparent 72%),var(--soft)}
.store-list-brand small{color:var(--ink)}

/* Only the compact floating nav uses glass. Its parent stays unfiltered. */
@media(max-width:680px){
 .topbar nav{
  background:radial-gradient(ellipse at 7% 0,#ffffff24,transparent 48%),radial-gradient(ellipse at 96% 100%,rgba(var(--clay-accent-rgb),.13),transparent 50%),rgba(var(--clay-hero-rgb),.91);
  border:1px solid #ffffff40;
  -webkit-backdrop-filter:blur(18px) saturate(145%);
  backdrop-filter:blur(18px) saturate(145%);
  box-shadow:inset 0 1px 0 #ffffff38,inset 0 -2px 3px #00000012,0 8px 22px rgba(var(--clay-hero-rgb),.19);
 }
 /* Fine reflected edges give the glass a lens-like volume. */
 .topbar nav:before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;box-shadow:inset 1px 0 0 #ffffff2b,inset -1px 0 0 #ffffff17}
 .topbar nav:after{content:"";position:absolute;left:15%;right:15%;bottom:0;height:1px;background:linear-gradient(90deg,transparent,#ffffff55,transparent);pointer-events:none}
 .topbar .nav.active{
  background:linear-gradient(145deg,#ffffff59,transparent 70%),var(--accent);
  color:var(--ink);
  box-shadow:inset 1px 2px 3px #ffffff66,inset -2px -3px 5px rgba(var(--clay-hero-rgb),.13),0 3px 7px #0000001a;
 }
 .home-view .hero-wallet{box-shadow:inset 0 1px 0 #ffffff20,inset 0 -3px 7px #00000015,0 10px 20px -17px rgba(var(--clay-hero-rgb),.5)}
}
@media(max-width:680px) and (prefers-reduced-transparency:reduce){
 .topbar nav{background:var(--hero);-webkit-backdrop-filter:none;backdrop-filter:none}
 .topbar nav:before,.topbar nav:after{display:none}
}

/* A brief press response; no looping or background animation. */
@media(prefers-reduced-motion:no-preference){
 .home-camera,.button.primary,.home-draft-button,.appearance-trigger,.header-history,
 .area-trigger,.topbar .nav,.shopping-layout-tabs button{transition:transform .14s ease,box-shadow .14s ease}
 .home-camera:active:not(:disabled),.button.primary:active:not(:disabled),.home-draft-button:active:not(:disabled),
 .appearance-trigger:active,.header-history:active,.area-trigger:active,.topbar .nav:active,
 .shopping-layout-tabs button:active{transform:translateY(1px) scale(.985)}
}
@media(forced-colors:active){
 .topbar nav:before,.topbar nav:after{display:none}
 .hero-wallet,.comparison-summary,.wallet-sticker,.wallet-arrow,.store-list-brand>span,
 .home-camera,.button,.home-draft-button,.tickets-open,.topbar nav,.topbar .nav,
 .area-trigger,.appearance-trigger,.header-history,.shopping-layout-tabs button{
  background-image:none;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;
 }
 .home-camera,.button,.home-draft-button,.topbar .nav.active,.shopping-layout-tabs button[aria-pressed="true"]{outline:1px solid ButtonText}
}