/* LifeformZ store — black chrome, gunmetal and silver.
 *
 * WHY THIS FILE EXISTS
 * The Lab (LifeformZ-Lab/static/lab-preview/metal.css + motion.css) moved to a
 * silver and gunmetal system on 19 Sep 2026. The store was still on the amber
 * palette derived from Magic: the Gathering, so the two halves of the same
 * company did not look related. This is that system, ported to the store.
 *
 * HOW IT ATTACHES
 * The store has no build step and ~144 amber-* utility classes across three
 * pages. theme.js already remaps Tailwind's amber and yellow scales, so the RAMP
 * is handled there and every existing utility class recolours with no markup
 * edits. This file does the parts a colour ramp cannot express: the gunmetal
 * ground, the sculpted panel relief, the liquid-metal flow on primary actions,
 * and the motion layer.
 *
 * THE TOKENS ARE THE LAB'S, copied rather than re-derived, so the two codebases
 * can be diffed against each other. Do not tune them here in isolation — change
 * the Lab and bring the value across, or the drift starts again.
 *
 * WHAT IS DELIBERATELY UNTOUCHED
 * Product colour swatches, the model-viewer canvas and the customer's engraving
 * font picker all carry real product meaning. A silver skin over a "Blue" swatch
 * would be a lie about what arrives in the box. Everything under .color-btn,
 * .trim-btn and model-viewer is left exactly as it was.
 */

:root {
  --bg: #090a0b;
  --panel: #222528;
  --text: #eceeef;
  --muted: #b4b8bb;
  --action: #d1d5d7;
  --action-ink: #121518;
  --metal-edge: #62676c;
  --metal-soft: #a9afb4;

  --button-fill: linear-gradient(168deg, #4b5055 0%, #303438 43%, #24272a 49%, #191b1e 100%);
  --button-hover: linear-gradient(168deg, #60676c 0%, #40464b 43%, #30353a 49%, #22262a 100%);
  --button-edge: #7b818688;
  --panel-fill: linear-gradient(145deg, #2b2f33 0%, #1b1e21 40%, #111315 100%);

  /* Static fallback. The animated ten-stop version lives under the
     prefers-reduced-motion: no-preference block below. */
  --silver-fill: linear-gradient(155deg, #f0f2f3 0%, #b9bec2 36%, #969da3 49%, #c9ced1 52%, #a2a9ae 100%);
  --silver-hover: linear-gradient(155deg, #fff 0%, #d4d8db 36%, #b5bcc2 49%, #e3e6e8 52%, #b9c0c5 100%);

  --motion-ease: cubic-bezier(.2, .75, .25, 1);
  scrollbar-color: #666d73 #121416;
}

/* ---- Ground ---------------------------------------------------------------
   Neutral and nearly black so the PRODUCT is the only saturated thing on screen.
   Same reasoning the old warm-brown ground was dropped for: a tinted ground
   makes a blue or green box photograph muddy. */
body {
  background:
    radial-gradient(ellipse at 88% 0%, #858d9518, transparent 44%),
    linear-gradient(135deg, #191c1f, #0d0f11 58%, #08090a);
  background-attachment: fixed;
  color: var(--text);
}

::selection { background: #c9cdd1; color: #111315; }

/* ---- Type -----------------------------------------------------------------
   Oxanium for display, Exo 2 for everyday text, matching the Lab. The customer's
   engraving font picker (TEXT_FONTS in index.html) is product data and is NOT
   touched by this — that list is what gets printed on the box. */
body,
body.font-sans { font-family: 'Exo 2', 'Segoe UI', sans-serif; font-weight: 450; }

h1,
h2,
.font-display {
  font-family: 'Oxanium', 'Segoe UI', sans-serif;
  letter-spacing: -.025em;
  font-weight: 600;
}

.brand-lockup .font-display { letter-spacing: -.04em; }

/* ---- Chrome: header, shipping bar, panels --------------------------------- */
header {
  background: linear-gradient(110deg, #3b4045 0%, #25292d 32%, #141719 70%, #101214) !important;
  border-bottom-color: #868d9340 !important;
  box-shadow: inset 0 1px #ffffff14;
}

#shipping-bar {
  background: linear-gradient(110deg, #2c3135, #16191c 80%) !important;
  color: #c3cbd1 !important;
  border-bottom: 1px solid #7e89915c;
}

#shipping-bar span { color: #e6eaed !important; }

/* The configure card and every overlay read as one milled surface.
 *
 * `#ui-panel > div` is the configurator card itself. It has no id of its own —
 * it is the bg-black/40 box inside the scrolling right-hand column — so it is
 * addressed structurally. If that wrapper ever gains an id, use the id here.
 *
 * `.metal-panel` is a forward hook: it matches nothing in the markup today and
 * exists so a new surface can opt in by adding one class. Same for
 * `button.primary` / `button.secondary` below, which mirror the Lab's own
 * spelling so markup can migrate toward it. */
#ui-panel > div,
#checkout-section,
#bug-report-section,
#symbol-request-section,
#collection-block,
.metal-panel {
  background: var(--panel-fill) !important;
  border-color: #858b923d !important;
  box-shadow: inset 0 1px #ffffff17, 0 10px 30px #0004;
}

/* The 3D stage. A pool of light under the model rather than flat black, so a
   white or silver box still reads as an object sitting in a space. */
#canvas-container {
  background: radial-gradient(ellipse at 50% 35%, #383d42, #0b0d0f 90%);
}

/* ---- Primary action: the liquid metal -------------------------------------
   Matched on the Tailwind signature the CTAs already carry rather than on new
   markup, so Confirm Design, Save & Design Another, Checkout and Design Yours
   all pick this up without touching a single class attribute. If a new CTA is
   added, give it `bg-gradient-to-r from-amber-700 to-yellow-800` and it joins
   them. */
[class~="from-amber-700"][class~="to-yellow-800"],
.lab-btn,
button.primary {
  background: var(--silver-fill) !important;
  background-image: var(--silver-fill) !important;
  color: var(--action-ink) !important;
  border-color: #d2d7db !important;
  text-shadow: 0 1px #ffffff40;
  box-shadow: inset 0 1px #fff8, inset 0 -1px #353c4255, 0 3px 10px #0005 !important;
}

[class~="from-amber-700"][class~="to-yellow-800"]:hover:enabled,
.lab-btn:hover,
button.primary:hover:enabled {
  background: var(--silver-hover) !important;
  background-image: var(--silver-hover) !important;
  color: #0d1013 !important;
}

/* The CTAs ship with text-white, which is unreadable on a silver fill. */
[class~="from-amber-700"][class~="to-yellow-800"] * { color: inherit !important; }

/* ---- Secondary action: gunmetal ------------------------------------------- */
[class~="text-amber-300"][class~="border"],
button.secondary {
  background: var(--button-fill);
  border-color: var(--button-edge) !important;
  color: #e3e6e8 !important;
  box-shadow: inset 0 1px #ffffff1c, 0 2px 6px #0003;
}

[class~="text-amber-300"][class~="border"]:hover:enabled,
button.secondary:hover:enabled {
  background: var(--button-hover);
  border-color: #afb7bf !important;
  color: #fff !important;
}

/* ---- Inputs ---------------------------------------------------------------
   Excludes the colour and trim swatches: those are the product's real colours. */
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]),
select,
textarea {
  background: #101315 !important;
  color: #e8ebed !important;
  border-color: #70798080 !important;
  box-shadow: inset 0 2px 5px #0003;
}

input::placeholder,
textarea::placeholder { color: #969ea5 !important; }

input[type=checkbox],
input[type=range],
progress { accent-color: #c8ced3; }

:where(button, a, input, select, textarea, summary):focus-visible {
  outline: 2px solid #e5e9ed;
  outline-offset: 3px;
}

/* Product truth: swatches and the 3D view keep their own colours. */
.color-btn,
.trim-btn,
model-viewer { filter: none !important; }

/* ---- Quieting the confirmation green -------------------------------------
   Emerald was the confirmation accent throughout: the spec ticks, the "CAD"
   after every price. Against amber it read as a second accent; against silver it
   became the loudest thing on a page whose whole premise is that the product is
   the only saturated element. So the DECORATIVE greens go to metal.

   The three status elements are excluded and keep real green and red, because
   there the colour IS the message — #symbol-request-status and #bug-report-status
   swap between text-emerald-400 and text-red-400 at runtime to say whether the
   thing worked, and #free-shipping-hint is a threshold being met or not.

   hover:border-emerald-300 on the Candy Green swatches is untouched by this: it
   is a border class, not a text class, and that green is the real filament. */
:is([class~="text-emerald-400"], [class~="text-emerald-300"]):not(#free-shipping-hint):not(#bug-report-status):not(#symbol-request-status) {
  color: #C9CED2 !important;
}

/* ---- Motion ---------------------------------------------------------------
   @property makes --silver-flow-x a real animatable percentage, which is what
   lets the highlight travel across the fill instead of cross-fading between two
   images. */
@property --silver-flow-x {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 0%;
}

@keyframes lab-silver-flow {
  0%   { --silver-flow-x: 0%; }
  50%  { --silver-flow-x: 80%; }
  100% { --silver-flow-x: 0%; }
}

@keyframes lab-surface-open {
  from { opacity: 0; transform: translateY(7px) scale(.99); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

@media (prefers-reduced-motion: no-preference) {
  :root {
    --silver-fill: linear-gradient(115deg, #a4adb4 0%, #e9eef0 12%, #b8c1c8 24%, #89949d 35%, #d5dde2 48%, #f0f4f5 53%, #a3aeb6 67%, #c4cdd3 79%, #929da6 91%, #d6dde1 100%);
    --silver-hover: linear-gradient(115deg, #bdc6cc 0%, #fff 12%, #d5dde2 24%, #a3aeb7 35%, #e6ecef 48%, #fff 53%, #bfc9d0 67%, #e2e9ed 79%, #abb7c0 91%, #ebf0f3 100%);
  }

  [class~="from-amber-700"][class~="to-yellow-800"],
  .lab-btn,
  button.primary:enabled {
    background-size: 260% 180% !important;
    background-position: var(--silver-flow-x) 50% !important;
    animation: lab-silver-flow 11s ease-in-out infinite;
  }

  button,
  a.lab-btn,
  .brand-lockup {
    transition:
      transform 220ms var(--motion-ease),
      box-shadow 260ms var(--motion-ease),
      border-color 220ms ease,
      color 180ms ease,
      background-color 200ms ease;
  }

  @media (hover: hover) and (pointer: fine) {
    [class~="from-amber-700"][class~="to-yellow-800"]:hover:enabled,
    .lab-btn:hover,
    button.primary:hover:enabled {
      transform: translateY(-2px);
      box-shadow: inset 0 1px #ffffff45, 0 5px 15px #0006 !important;
    }
  }

  button:active:enabled {
    transform: translateY(1px) scale(.985);
    transition-duration: 70ms;
  }
}

@media (prefers-reduced-motion: reduce) {
  /* Also suppresses the hover lift baked into the CTA utility classes.
     Focus stays visible. */
  button,
  a.lab-btn { transition: none !important; }

  button:active,
  button:hover { transform: none !important; }
}

@media (forced-colors: active) {
  [class~="from-amber-700"][class~="to-yellow-800"],
  .lab-btn,
  button.primary {
    color: ButtonText !important;
    background: ButtonFace !important;
    border-color: ButtonText !important;
  }
}