/* FH9 UI Tokens (reusable across custom modules)
   v2.1.2: aligned with fh9_product_details v1.6.23 "Ultra Sobre Luxe"
*/
:root{
  /* Same palette/tokens as fh9_product_details for perfect cohesion */
  --fh9pd-bg-1:#0e0e0f;
  --fh9pd-bg-2:#141416;
  --fh9pd-gold:#c9a65a;
  --fh9pd-text:#f1f1f1;
  --fh9pd-muted:rgba(255,255,255,.55);
  --fh9pd-border:rgba(201,166,90,.28);
  --fh9pd-border-soft:rgba(201,166,90,.15);
  --fh9pd-glow:rgba(201,166,90,.18);

  /* Generic FH9 aliases used by other modules */
  --fh9-bg-0: var(--fh9pd-bg-1);
  --fh9-bg-1: var(--fh9pd-bg-2);
  --fh9-stroke: var(--fh9pd-border);
  --fh9-stroke-2: rgba(201,166,90,.35);
  --fh9-text: var(--fh9pd-text);
  --fh9-text-2: rgba(255,255,255,.76);
  --fh9-gold: var(--fh9pd-gold);
  --fh9-gold-2: var(--fh9pd-glow);
  --fh9-shadow: 0 10px 28px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.02);
  --fh9-radius: 22px;
  --fh9-radius-sm: 14px;
}

/* Base FH9 card (should look like fh9pd blocks) */
.fh9-card{
  position:relative;
  border-radius: var(--fh9-radius);
  overflow:hidden;
  border:1px solid var(--fh9pd-border);
  background: linear-gradient(180deg, var(--fh9pd-bg-1), var(--fh9pd-bg-2));
  box-shadow: var(--fh9-shadow);
  color: var(--fh9pd-text);
}

.fh9-card--conversion{
  /* Keep subtle extra presence without deviating */
  box-shadow: 0 10px 28px rgba(0,0,0,.45), 0 0 18px rgba(201,166,90,.10), inset 0 1px 0 rgba(255,255,255,.02);
}