/*
 * UNE Joyas — theme for the ring configurator.
 *
 * TOKENS ONLY. If anything here starts describing layout, spacing or behaviour,
 * the contract has been broken and the fix belongs in configurator.css. That
 * rule is what keeps a shop's look from turning into a fork of the plugin.
 *
 * Load AFTER configurator.css.
 *
 * IT MAPS, IT DOES NOT COPY.
 *
 * UNE already has a design system - `--une-*`, defined in the theme's style.css
 * and mirrored in design-system/tokens.css of the UneJoyasWeb repo. So every
 * line below points AT those variables instead of restating their values. The
 * day the shop retunes its plum, the configurator follows on its own; a copied
 * hex would silently drift and nobody would notice until the two looked wrong
 * side by side.
 *
 * The fallbacks are for the bench, where the shop's stylesheet is not loaded.
 * In production the second argument never gets used.
 */

.spinshop-configurator {
  --sc-ink: var(--une-color-text, #2f2031);
  --sc-ink-soft: var(--une-color-text-soft, #79657b);
  --sc-ink-faint: var(--une-color-accent-soft, #79657b);
  --sc-paper: var(--une-color-bg, #f4f0f5);
  --sc-paper-warm: var(--une-color-surface-alt, #e7dfe8);
  --sc-line: var(--une-color-border, #d3c8d5);
  --sc-accent: var(--une-color-brand, #644b68);
  /* Un paso mas claro del mismo ciruela: el hover de un boton oscuro aclara.
     No sale de --une-* porque la escala de UNE no tiene ese paso. Deja el texto
     en 5.2:1, asi que el estado con hover no baja de AA. */
  --sc-accent-hover: #785a7c;
  --sc-warn: #9c3b2f;

  /*
   * The stage takes the shop's DARK-theme background, not its light one.
   *
   * Silver has no colour of its own - it is entirely what it reflects - so on a
   * light backdrop it renders as grey plastic. The stage has to stay dark. But
   * it does not have to be neutral, and borrowing the plum UNE already uses for
   * dark mode puts the viewport inside the brand instead of punching a black
   * hole through the page.
   *
   * Two things were wrong and only one of them was the hue. The core used to
   * inherit the plugin's neutral #1d2027, which sits at hue 222 while the other
   * two stops are at 293 - a 71 degree split INSIDE one gradient, and the reason
   * the viewport read as a foreign object dropped on the page.
   *
   * The other was simply that it was too dark for the page around it. The three
   * stops now run L22/17/12, which is the header's own L22/16/12: the bar and
   * the viewport are lit the same, so they read as one piece.
   *
   * HOW FAR THIS CAN GO. The rule this file used to state - lighten the stage
   * and silver turns to grey plastic - is about the ENVIRONMENT, not about this.
   * The canvas is transparent (alpha: true, scene.background = null in
   * viewer.js), so the metal reflects studio-environment.js and never these
   * colours; all they do is set the backdrop the rings are seen against. The
   * real ceiling is contrast: the rings carry near-black shadow terminators, and
   * once the backdrop reaches them the silhouette stops separating. That is
   * further up than L22, but it is not infinitely far.
   */
  --sc-stage-core: #422b46;
  --sc-stage: #332135;
  --sc-stage-edge: #241726;

  --sc-serif: var(--une-font-display, "Cormorant Garamond", "Times New Roman", serif);
  --sc-sans: var(--une-font-body, "Manrope", "Segoe UI", Arial, sans-serif);

  /*
   * Cormorant a 500, apretada, como los títulos de la tienda — pero UN PASO MÁS
   * ABAJO de `--une-section-title-size`.
   *
   * Ese token vale 51 px y es para rotular una sección de la portada ("Más
   * vendidos"). El nombre del modelo dentro de un panel no es eso: es el título
   * de una ficha. A tamaño de sección, "Media caña bordes con líneas" ocupaba
   * dos renglones de 54 px — 108 px, un 11% del panel entero — y era lo que
   * empujaba el botón de compra fuera de pantalla.
   *
   * La escala de UNE no trae un paso intermedio (salta de 20 px de card-title a
   * 51 px de section-title), así que este se construye entre los dos.
   */
  --sc-display-size: clamp(1.55rem, 2.3vw, 2rem);
  --sc-display-weight: var(--une-heading-weight, 500);
  --sc-display-spacing: -0.015em;

  /*
   * UNE runs generously rounded - 16 to 30 px. Controls take the smallest of
   * them and the stage the largest: at 30 px a 2.5 rem stepper stops reading as
   * a control and starts reading as a pill.
   */
  --sc-radius: 10px;
  --sc-radius-lg: var(--une-radius-lg, 22px);

  /*
   * ESTA es la forma canonica del boton de compra de UNE, decidida el
   * 2026-08-11 mirando los tres que hay en el sitio.
   *
   * Se escribe aunque valga lo mismo que --sc-radius, porque coincidir por
   * casualidad no es lo mismo que coincidir a proposito: el dia que los
   * controles cambien de radio, el boton no tiene por que seguirlos.
   *
   * La tienda entera la cumple desde el mismo dia - ver --une-radius-btn en el
   * style.css del tema, que es de donde sale este valor y donde esta anotado
   * que NO es un boton y por eso sigue redondo.
   */
  --sc-radius-cta: 10px;
}