/* Slate & pine finishing pass. Materials follow palette roles, not fixed hues.
   The tiny static grain is a background image, never an overlay on NFT artwork. */
:root[data-ui-theme] {
  --finish-grain:url('/assets/ui-grain.svg');
  --finish-glint:rgb(255 255 255 / .07);
  --finish-shade:rgb(0 0 0 / .17);
  --finish-shadow:rgb(0 0 0 / .25);
  --finish-shadow-deep:rgb(0 0 0 / .38);
  --finish-surface:linear-gradient(155deg,color-mix(in srgb,var(--paper) 3%,transparent),transparent 45%);
  --finish-raised:inset 0 1px 0 var(--finish-glint),inset 0 -1px 0 var(--finish-shade),0 3px 8px -4px var(--finish-shadow),0 18px 36px -25px var(--finish-shadow-deep);
}
html[data-theme-mode="light"] {
  --finish-glint:rgb(255 255 255 / .8);
  --finish-shade:rgb(0 0 0 / .045);
  --finish-shadow:rgb(27 35 31 / .1);
  --finish-shadow-deep:rgb(27 35 31 / .16);
  --finish-surface:linear-gradient(155deg,rgb(255 255 255 / .3),transparent 50%);
}

/* Gentle ambient light and fine paper-like grain. No moving noise or fixed layers. */
html[data-ui-theme] body,
html[data-ui-theme] #view-studio,
html[data-ui-theme] #view-marketplace {
  background-color:var(--ink);
  background-image:var(--finish-grain),
    radial-gradient(ellipse 80% 620px at 85% 0%,color-mix(in srgb,var(--secondary) 5%,transparent),transparent 72%),
    radial-gradient(ellipse 65% 700px at 0% 700px,color-mix(in srgb,var(--acid) 2%,transparent),transparent 75%);
  background-size:128px 128px,100% 100%,100% 100%;
  background-repeat:repeat,no-repeat,no-repeat;
}

/* Fine edges on the navigation and clear, tactile buttons. */
html[data-ui-theme] .site-header { border-bottom-color:var(--line);box-shadow:0 1px 0 var(--finish-shade); }
html[data-ui-theme] :is(.main-nav,.credit-pill,.wallet-button,.chain-pill) {
  background-image:var(--finish-surface);
  box-shadow:inset 0 1px 0 var(--finish-glint),0 2px 5px -2px var(--finish-shadow);
}
html[data-ui-theme] .nav-link.active {
  background-image:linear-gradient(180deg,rgb(255 255 255 / .045),transparent);
  box-shadow:inset 0 1px 0 var(--finish-glint),0 1px 3px var(--finish-shade);
}
html[data-ui-theme] .button {
  transition:background-color .16s,border-color .16s,box-shadow .16s,transform .16s;
}
html[data-ui-theme] .button-primary,
html[data-ui-theme] .button-primary:hover,
html[data-ui-theme] #view-marketplace .market-list-cta,
html[data-ui-theme] #view-marketplace .market-list-cta:hover {
  background-image:linear-gradient(180deg,rgb(255 255 255 / .13),transparent 50%,rgb(0 0 0 / .035));
  box-shadow:inset 0 1px 0 rgb(255 255 255 / .23),inset 0 -1px 0 rgb(0 0 0 / .12),0 3px 7px -3px var(--finish-shadow-deep);
}
html[data-ui-theme] .button-primary:hover:not(:disabled) {
  box-shadow:inset 0 1px 0 rgb(255 255 255 / .3),0 5px 14px -7px color-mix(in srgb,var(--acid) 35%,transparent),0 3px 8px -3px var(--finish-shadow-deep);
}
html[data-ui-theme] .button-ghost {
  background-image:var(--finish-surface);
  box-shadow:inset 0 1px 0 var(--finish-glint),0 2px 4px -2px var(--finish-shadow);
}
html[data-ui-theme] .button:active:not(:disabled) {
  transform:translateY(0);
  box-shadow:inset 0 2px 4px var(--finish-shade);
}

/* The hero keeps a flat face, a fine border, and a soft cast shadow. */
html[data-ui-theme] .hero-machine {
  background-image:var(--finish-grain),var(--finish-surface);
  background-size:128px 128px,100% 100%;
  border-color:color-mix(in srgb,var(--paper) 19%,transparent);
  box-shadow:0 28px 50px -20px var(--finish-shadow-deep),0 60px 90px -60px var(--finish-shadow-deep);
}
html[data-ui-theme] :is(.hero-market-footer,.studio-examples,.panel-head) {
  border-color:var(--line);
}
html[data-ui-theme] .hero-market-heading > strong { letter-spacing:-.035em; }
html[data-ui-theme] :is(.hero-deck-controls button,.hero-market #remixHero) {
  box-shadow:inset 0 1px 0 var(--finish-glint);
  transition:background-color .15s,border-color .15s,box-shadow .15s;
}

/* Shared material language across Discover, Studio, the market and the guide. */
html[data-ui-theme] :is(.studio-panel,.launch-section,.workflow article,.rewards-fee-card,.marketplace-shell,.app-dialog) {
  background-image:var(--finish-surface);
  box-shadow:var(--finish-raised);
}
html[data-ui-theme] .minted-section {
  background-image:linear-gradient(115deg,color-mix(in srgb,var(--acid) 9%,transparent),transparent 75%),var(--finish-surface);
}
html[data-ui-theme] .marketplace-shell { border-radius:18px; }
html[data-ui-theme] .market-home { border-radius:inherit; }
html[data-ui-theme] :is(.market-terminal-bar) { border-radius:17px 17px 0 0;background-image:var(--finish-surface); }
html[data-ui-theme] :is(.launch-card,.market-listing-card) {
  background-image:var(--finish-surface);
  box-shadow:inset 0 1px 0 var(--finish-glint),0 5px 10px -7px var(--finish-shadow-deep);
  transition:background-color .16s,border-color .16s,box-shadow .16s,transform .16s;
}
html[data-ui-theme] .market-listing-card { border-radius:9px; }
html[data-ui-theme] :is(.launch-card,.market-listing-card):hover {
  background-image:var(--finish-surface);
  box-shadow:inset 0 1px 0 var(--finish-glint),0 10px 24px -12px var(--finish-shadow-deep);
}
html[data-ui-theme] .studio-example-art {
  box-shadow:0 3px 7px -3px var(--finish-shadow),0 12px 22px -15px var(--finish-shadow-deep);
  transition:border-color .16s,box-shadow .16s,transform .16s;
}
html[data-ui-theme] .studio-example:hover .studio-example-art {
  box-shadow:0 5px 10px -3px var(--finish-shadow),0 18px 30px -15px var(--finish-shadow-deep);
}

/* Fields sit slightly inside their parent; pickers and tabs sit slightly above. */
html[data-ui-theme] #view-studio :is(.chat-compose,.plain-input,.suffix-input),
html[data-ui-theme] :is(.market-search,.launch-search) {
  box-shadow:inset 0 1px 3px var(--finish-shade),0 1px 0 var(--finish-glint);
}
html[data-ui-theme] #view-studio :is(.chat-compose,.suffix-input):focus-within,
html[data-ui-theme] #view-studio .plain-input:focus-visible,
html[data-ui-theme] :is(.market-search,.launch-search):focus-within {
  border-color:var(--acid);
  box-shadow:inset 0 1px 2px var(--finish-shade),0 0 0 3px color-mix(in srgb,var(--acid) 13%,transparent);
}
html[data-ui-theme] #view-studio :is(.quote-trigger,.style-trigger,.model-option,.advanced-row,.sprite-trait-option) {
  background-image:var(--finish-surface);
  box-shadow:inset 0 1px 0 var(--finish-glint),0 2px 4px -2px var(--finish-shadow);
}
html[data-ui-theme] #view-studio .sprite-trait-option.enabled {
  background-image:linear-gradient(110deg,var(--secondary-selection),transparent 75%),var(--finish-surface);
}
html[data-ui-theme] #view-studio .advanced-row:hover {
  background:var(--warm-hover);
  border-color:var(--secondary);
  box-shadow:inset 0 1px 0 var(--finish-glint),0 5px 12px -5px var(--finish-shadow-deep);
  transform:translateY(-2px);
}
html[data-ui-theme] #view-studio .advanced-row:focus-visible {
  outline:2px solid var(--acid);
  outline-offset:3px;
  border-color:var(--secondary);
}
html[data-ui-theme] #view-studio .advanced-row:active {
  transform:translateY(0);
  box-shadow:inset 0 2px 4px var(--finish-shade);
}
html[data-ui-theme] :is(.palette-control,.theme-lab,.theme-lab-reopen,.sweep-dock) {
  background-image:var(--finish-surface);
  box-shadow:var(--finish-raised);
}
/* The selected-NFT tray is a distinct deep-teal action surface, not a pine card. */
html[data-ui-theme] .sweep-dock {
  --sweep-surface:#10484d;
  --sweep-highlight:#15565b;
  --sweep-depth:#0b343b;
  --sweep-edge:#548d8d;
  --sweep-text:#effaf4;
  --sweep-label:#b6d8d2;
  color:var(--sweep-text);
  background:linear-gradient(155deg,var(--sweep-highlight),var(--sweep-surface) 48%,var(--sweep-depth));
  border-color:var(--sweep-edge);
  box-shadow:inset 0 1px 0 rgb(215 255 246 / .13),inset 0 -1px 0 rgb(0 0 0 / .2),0 8px 22px rgb(0 0 0 / .38),0 22px 55px -12px rgb(0 0 0 / .5);
}
html[data-ui-theme] .sweep-dock > p > small,
html[data-ui-theme] .sweep-dock .sweep-clear { color:var(--sweep-label); }
html[data-ui-theme] .sweep-dock .sweep-stack i { border-color:var(--sweep-edge);background:var(--sweep-depth); }
html[data-ui-theme] .sweep-dock .sweep-clear:hover { color:var(--sweep-text);text-decoration:underline;text-underline-offset:3px; }
html[data-ui-theme] .sweep-dock .sweep-clear:focus-visible { outline:2px solid var(--acid);outline-offset:3px; }
html[data-ui-theme] body > footer {
  background-image:var(--finish-grain),linear-gradient(180deg,var(--finish-shade),transparent 100px);
  background-size:128px 128px,100% 100%;
  border-top-color:var(--line);
  box-shadow:inset 0 1px 0 var(--finish-glint);
}

@media(prefers-reduced-motion:reduce) {
  html[data-ui-theme] #view-studio .advanced-row { transition:none; }
  html[data-ui-theme] #view-studio .advanced-row:hover { transform:none; }
  html[data-ui-theme] :is(.button,.studio-example-art,.launch-card,.market-listing-card,.hero-deck-controls button) { transition:none; }
  html[data-ui-theme] :is(.button,.launch-card,.market-listing-card):hover { transform:none; }
  html[data-ui-theme] .studio-example:hover .studio-example-art { transform:none; }
}
@media(forced-colors:active) {
  html[data-ui-theme] { --finish-grain:none;--finish-surface:none; }
  html[data-ui-theme] :is(body,#view-studio,#view-marketplace,.hero-machine,.button,.studio-panel,.launch-card,.market-listing-card,.app-dialog) { background-image:none;box-shadow:none; }
  html[data-ui-theme] .sweep-dock {
    --sweep-text:CanvasText;--sweep-label:CanvasText;--sweep-edge:CanvasText;--sweep-depth:Canvas;
    color:CanvasText;background:Canvas;border-color:CanvasText;box-shadow:none;
  }
}